Question

我有一个<ul>，它像手风琴一样工作。

当我单击一个时，它会打开。
当我单击另一个时，所有打开的手风琴都必须关闭

在所有<li>的循环中，我不再有这个要求，我尝试将其作为参数传递给函数，但它不起作用

$('.form-trigger').on('click', function() {
      var parent_li = $(this).closest('li');
      var parent_ul = $(this).closest('.form-list');

      console.log(parent_li);
      var current_li = parent_li


      parent_ul.find('li').each(function(current_li) {
        if( $(this).hasClass('active') && $(this) != current_li ) {
           $(this).removeClass('active');
           $(this).find('.inner__form-list').slideToggle();
        }

        } );

        parent_li.toggleClass('active');
        parent_li.find('.inner__form-list').slideToggle();
        parent_li.find('span').toggleClass('close-form-item');

    });

.form-trigger->这是<a>标记，它与父li并添加类active

Answer 1

只需更改

parent_ul.find('li').each(function(current_li) {

到

parent_ul.find('li').each(function() {

和current_li会在您的.each()循环内显示，因为它在范围内。

也在;的末尾添加一个var current_li = parent_li。

我希望代码的另一部分正在做您想要的事情。

Answer 2

 $('.form-trigger').on('click', function() {
      var parent_li = $(this).closest('li');
      var parent_ul = $(this).closest('.form-list');

  console.log(parent_li);
  var current_li = parent_li;

  parent_li.siblings().removeClass('active').find('.inner__form-list').slideUp();

    parent_li.toggleClass('active');
    parent_li.find('.inner__form-list').slideToggle();
    parent_li.find('span').toggleClass('close-form-item');
});

使用.siblings（）可以，但是谢谢您的回答。

Answer 3

您可以执行以下操作。

$('.form-trigger').on('click', function() {
      var parent_li = $(this).closest('li');
      var parent_ul = $(this).closest('.form-list');

      console.log(parent_li);
      var current_li = parent_li

      var self = this;
      parent_ul.find('li').each(function(current_li) {
        if( $(self).hasClass('active') && $(self) != current_li ) {
           $(self).removeClass('active');
           $(self).find('.inner__form-list').slideToggle();
        }

        } );

        parent_li.toggleClass('active');
        parent_li.find('.inner__form-list').slideToggle();
        parent_li.find('span').toggleClass('close-form-item');

    });

这是将this的值存储在变量中（通常devs将其命名为self）并在循环中使用它。

jQuery自定义手风琴，关闭其他已打开的li

3 个答案: