javascript - 如何设置我要切换的元素在加载时折叠

Question

我正在努力弄清楚如何使我在 click 上切换的元素在页面最初加载时 jQuery 折叠起来。目前一切都在加载中打开 - 与我需要的恰恰相反。

请记住，我是初学者，有人可以帮助我吗？谢谢。

// Toggle       
$('.togglehandle').click(function() {
    $(this).toggleClass('active');
    $(this).next('.toggledata').slideToggle();
});

// alert close 
$('.clostalert').click(function(){
    $(this).parent('.alert').fadeOut ();
    $('#options').hide();
}); 

Answer 1

首先，请记住在 CSS 中将 ".toggledata" 元素设置为 display: none。

此外，请确保您发布的两个处理程序都包含在 $(document).ready() 中。换句话说，请确保您有如下所示的内容:

$(document).ready(function() {
    // Toggle       
    $('.togglehandle').click(function() {
        $(this).toggleClass('active');
        $(this).next('.toggledata').slideToggle();
    });

    // alert close 
    $('.clostalert').click(function(){
        $(this).parent('.alert').fadeOut ();
        $('#options').hide();
    }); 
});

仅仅因为您提到您是初学者......这里只需进行一些代码清理；)

$(document).ready(function() {
    // Toggle       
    $('.togglehandle').on('click', function() { //1: .click() -> .on('click',
        var $this = $(this); //2: $(this) -> var $this = $(this)
        $this.toggleClass('active');
        $this.next('.toggledata').slideToggle();
    });

    // alert close 
    $('.clostalert').on('click', function(){
        $(this).parent('.alert').fadeOut(); //3: No change
        $('#options').hide();
    }); 
});

变更说明:

1. 将 .click() 更改为 .on('click'...

   .click() 方法只是 .on('click'... 方法的简写。使用长格式实际上没有任何好处与简写不同的是，它标准化了您的处理程序绑定(bind)并具有更多参数选项(例如使用委托(delegate)事件时，您将来可能会这样做)。

2. 将 $(this) 更改为 var $this = $(this)

   这部分有时很难让你全神贯注。首先也是最重要的一点，了解 jQuery 本身实际上是一个函数对象。 jQuery 的开发人员为该库指定了两个在编码时可以互换使用的名称:$ 和 jQuery。

   换句话说，以下两者实际上是等效的:

   $('.toggledata').slideToggle();
   

   和

   jQuery('.toggledata').slideToggle();
   

   这很重要，因为必须记住 $ 本质上是一个函数名称，与其他函数名称一样使用。因此，每次调用 $(this) 时，您实际上都是在调用“构造函数”函数来初始化新的 jQuery 对象。因此，为了提高代码效率，我们将 $(this) 存储在变量中，以便可以重用。

   变量名$this只是一种约定(您应该养成使用习惯的好习惯)。一个常见的约定是在保存 jQuery 对象的任何变量名称前加上美元符号。例如，如果我们将 $('.clostalert') 存储在变量中，那么我们会执行以下操作:

   var $clostalert = $('.clostalert');
   

3. 请注意，我们不必将 $(this) 存储在第二个处理程序的变量中，因为它仅使用一次，因此 $(this) > 只在那里调用一次。