Question

我有一个按钮

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

class“dis”只是display：none;

Answer 1

您错过了课程声明中的.并使用toggle代替toggleClass

Here正在帮助你。

<强> HTML

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

Answer 2

您需要为要点击的元素确定高度，因为它似乎不可见。

试试这个小提琴：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");
});
});

Answer 3

包括jquery和toggle都可以正常工作，之后你可以隐藏和显示

$(document).ready(function(){$("#expansion").click(function(){
    $("#expandable").toggle();});});

Jquery toggleclass并点击不工作

3 个答案: