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，那真的很简单。从一个隐藏开始，当单击可见一个时切换两个。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果有两个以上的此类div，则该技术必须略有改变：

＆＃13;

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

＆＃13;

    <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>

＆＃13;

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

显示隐藏内容

2 个答案: