<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 都有一个单独的数据框,但显示在行的末尾。
最佳答案
如果您只有两个这样的 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>
关于javascript - 显示隐藏内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31147152/