Question

我有两个列表，我希望其功能类似于手风琴，当点击指定的元素时，指定的列表会被隐藏，再次点击它会切换到显示。

HTML：

    <ul class="acc" id="acc">
            <li>
                    <h3 class="slide">CATEGORIES</h3>
                    <div class="acc-section">
                    <div class="acc-content view">

                    <ul>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                    </ul>
            </div>
            </div>
            </li>

            <li>
                    <h3 class="slide2">CATEGORIES</h3>
                    <div class="acc-section">
                    <div class="acc-content view2">

                    <ul>

                   <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>

</ul>
            </div>
            </div>
            </li>
    </ul>

我使用以下代码为两个列表完成了此操作：

$(document).ready(function() { 
  $('h3.slide').toggle(function() { 
    $('div.view').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $('div.view').fadeIn('slow'); 
            return false; 
    }); 
    $('h3.slide2').toggle(function() { 
    $('div.view2').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $('div.view2').fadeIn('slow'); 
            return false; 
    }); 
});

我的问题是它不是“动态的”，如果我将来添加另一个列表，那么我还需要上面的代码。我希望能够只使用一小段代码并为clickable元素和show / hide元素重用相同的两个类名。我尝试使用以下代码完成此操作，但无法使其正常工作：

$(document).ready(function() { 
  $('h3.slide').toggle(function() { 
    $(this).siblings('div.view').fadeOut('slow');
    return false; 
     }, 
        function() { 
            $(this).siblings('div.view').fadeIn('slow'); 
            return false; 
    }); 
});

任何提示？

Answer 1

要将事件应用于需要在最初加载DOM之后加载的元素，请尝试jQuery on（）函数。类似的东西：

$(function(){
  $('h3.slide').on('toggle', function() { 
    $('div.view').fadeOut('slow');
    return false; 
    }, 
      function() { 
      $('div.view').fadeIn('slow'); 
      return false; 
  }); 
  $('h3.slide2').on('toggle', function() { 
    $('div.view2').fadeOut('slow');
    return false; 
    }, 
      function() { 
      $('div.view2').fadeIn('slow'); 
      return false;
  }); 
});

希望有所帮助。

请参阅：http://api.jquery.com/on/

Answer 2

你可以在这里使用jquery“最近”而不是兄弟姐妹。 http://api.jquery.com/closest/

例如：

$(this).closest('div.view').fadeOut('slow');

如果这不符合您的需求，请发布您的CSS，我可以帮助您更好。

Answer 3

感谢您的努力，但我能够使用.slideToggle解决此问题：http://api.jquery.com/slideToggle/

JQuery多列表手风琴问题

3 个答案: