This question already has answers here:
Onclick Show / Hide Multiple Divs Jquery
(5个答案)
5年前关闭。
我正在使用jQuery和Bootstrap。
我想要的是,当我单击一列内的
我有几行特斯。
我的html看起来像这样:
但是,当我将它们合并到一起时,我似乎无法做到这一点。像这样:
但这并没有我想要的布局。
我的脚本如下所示:
});
我认为问题是我正在使用
还有另一种更正确的方法还是另一种方法?
HTML:
(5个答案)
5年前关闭。
我正在使用jQuery和Bootstrap。
我想要的是,当我单击一列内的
h5
时,另一格在另一列中打开,并且再次单击h5时,它关闭(我还没有尝试过该代码)我有几行特斯。
我的html看起来像这样:
<div class="row">
<div class="col-md-6">
<h5 class="select">2013 - </h5>
</div>
<div class="col-md-6">
<div id="dropdown" class="dropdown">
<p>Content</p>
</div>
</div>
</div>
但是,当我将它们合并到一起时,我似乎无法做到这一点。像这样:
<div class="row">
<div class="col-md-6">
<h5 class="select">2013 - 2013</h5>
<div id="dropdown" class="dropdown">
<p>Content1</p>
</div>
</div>
</div>
但这并没有我想要的布局。
我的脚本如下所示:
$(document).ready(function(){
var dropdown = $('.dropdown');
dropdown.hide();
$('.select').on('click', function(){
$(this)
.next('.dropdown')
.slideDown(400)
console.log('.dropdown');
})
});
我认为问题是我正在使用
next()
。还有另一种更正确的方法还是另一种方法?
最佳答案
我已经使用style =“ display:none;”解决了此问题属性,如下面的代码所示。
JavaScript:
<script type="text/javascript">
function _Toggle(div){
if(document.getElementById(div).style.display == 'none'){
document.getElementById(div).style.display = 'block';
}else{
document.getElementById(div).style.display = 'none';
}
}
</script>
HTML:
<div class="foo_summary_header_1">
<a href="#a147358" onclick="_Toggle('traits_12345');">Heading</a>
</div>
<div id="traits_12345" class="foo_traits" style="display:none;">
<P>Body text that will be hidden by clicking the heading</P>
</div>'