显示隐藏内容

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');
        });
      });

}); 

当单击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>

​

Answer 2

这就是你要找的吗？

http://codepen.io/anon/pen/wayBwp

$(".p").click(function(){
  $(".c").removeAttr( "hidden" );
  $(".p").attr("hidden","hidden");
})

$(".c").click(function(){
  $(".p").removeAttr( "hidden" );
  $(".c").attr("hidden","hidden");
})