Jquery切换并单击“不工作”。
Jquery切换并单击“不工作”。
提问于 2016-09-30 01:36:36
我有个按钮
<button id="expansion" class="btn btn-block btn-primary">
stuff
</button>当我点击它时，我希望它要么出现要么消失
<div class="container-fluid" >
<div class="row">
<div class="col-md-12">
<div style="padding:0 7%;line-height:30px;text-align:justify;" id="expandable" class="dis">
<p>lol</p>
</div>
</div>
</div>
这是我的jquery函数。但是当我点击按钮时，什么都不会发生。
$("#expansion").click(function(){
$("#expandable").toggleClass("dis");
});类"dis“只是显示:无；
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-09-30 01:44:34
类的声明中遗漏了.，并且使用toggle而不是toggleClass
这里在为你做小提琴。
<button id="expansion" class="btn btn-block btn-primary">
stuff
</button>
<div class="container-fluid" >
<div class="row">
<div class="col-md-12">
<div style="padding:0 7%;line-height:30px;text-align:justify;" id="expandable" class="dis">
<p>lol</p>
</div>
</div>
</div>JS
$("#expansion").click(function(){
$("#expandable").toggle(".dis");
});CSS
.dis{
display:none;
}Stack Overflow用户
发布于 2016-09-30 01:48:56
您需要通过一个高度到您想要单击的元素，因为它似乎是无形的。
试试这把小提琴：https://jsfiddle.net/g72nr1sp/
HTML
<div class="container-fluid" >
<div class="row">
<div class="col-md-12" id="expansion" style="height:20px;">
<div style="padding:0 7%;line-height:30px;text-align:justify;" id="expandable" class="dis">
<p>lol</p>
</div>
</div>
</div>
</div>CSS
.dis {
display:none;
}
#expansion{
background-color:lime;
height:20px;
}Javascript
$(document).ready(function(){
$("#expansion").click(function(){
$("#expandable").toggleClass("dis");
});
});Stack Overflow用户
发布于 2016-09-30 01:54:59
包含jquery和切换都很好，然后你可以隐藏和显示。
$(document).ready(function(){$("#expansion").click(function(){
$("#expandable").toggle();});});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39782398
复制相关文章
相似问题
腾讯云开发者
