javascript - 显示隐藏内容

Question

 <div href="#collapse1" class="nav-toggle">1</div>
 <div href="#collapse2" class="nav-toggle">2</div>
 <div href="#collapse3" class="nav-toggle">3</div>
 <div href="#collapse4" class="nav-toggle">4</div>
 <div href="#collapse5" class="nav-toggle">5</div>


$(document).ready(function() {
      $('.nav-toggle').click(function(){
        var collapse_content_selector = $(this).attr('href');                   
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function(){
          if($(this).css('display')=='none');
        });
      });

}); 

[1] [2] [3] [4] [5] 当点击一个 div 我想在行下方显示一个数据框。每个 div 都有一个单独的数据框，但显示在行的末尾。

Answer 1

如果您只有两个这样的 div，那真的很简单。从一个隐藏的开始，当单击可见的一个时切换两者。

$('.nav-toggle').last().hide().end().on('click', function() {
     $('.nav-toggle').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div href="#collapse1" class="nav-toggle">1</div>
 <div href="#collapse2" class="nav-toggle">2</div>

如果有两个以上的 div，技术必须稍微改变:

    $('.nav-toggle').not(':first').hide().end().on('click', function() {
          var navs = $('.nav-toggle');
          var index = navs.index(this);
          var next  = (index + 1) % navs.length;
          navs.eq(next).add( this ).toggle();
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div class="nav-toggle">1</div>
    <div class="nav-toggle">2</div>
    <div class="nav-toggle">3</div>
    <div class="nav-toggle">4</div>