Question

我想实现Bootstrap glyphicon-plus和glyphicon-minus。但是，当我点击glyphicon-plus时，内容会展开，但glyphicon-plus不会更改为glyphicon-minus。

这是代码：

<button type="submit" value="Button" data-toggle="collapse" data-target="#demo"><span class="glyphicon glyphicon-plus"></span></button> 
<div class="container">
    <div id="demo" class="collapse">
        <div>
           Hi there!
        </div>
    </div>
</div>

JavaScript代码：

<script type="text/javascript">
    $('.collapse').on('shown.bs.collapse', function () {
        $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
    }).on('hidden.bs.collapse', function () {
        $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
    });
</script>

我哪里出错了。请指导我。谢谢！

Answer 1

$(this).parent()是<div class="container">，其中不包含class="glyphicon-plus"的元素

您需要找到<button>，然后找<span>

中的<button>

<script type="text/javascript">
    $('.collapse').on('shown.bs.collapse', function () {
        $(this).parent().prev('button').find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
    }).on('hidden.bs.collapse', function () {
        $(this).parent().prev('button').find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
    });
</script>

作为旁注，您可以使用.toggleClass('glyphicon-plus glyphicon-minus')添加和删除类名来简化此操作。

<script type="text/javascript">
    $('.collapse').on('shown.bs.collapse, hidden.bs.collapse', function () {
        $(this).parent().prev('button').find('span').toggleClass('glyphicon-plus glyphicon-minus');
    })
</script>

Answer 2

您可以使用解决方案

＆＃13;

$('.collapse').on('shown.bs.collapse', function () {
  $(this).closest('div.container').prev("button").find("span.glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
  $(this).closest('div.container').prev("button").find("span.glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" value="Button" data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-plus"></span>
</button> 
<div class="container">
    <div id="demo" class="collapse">
        <div>
           Hi there!
        </div>
    </div>
</div>

＆＃13;

我用过：

closest找到父元素（容器类）
prev获取上一个元素（按钮）
find获取按钮内的范围

希望这会对你有所帮助。

Bootstrap Glyphicon（折叠和展开）不起作用

2 个答案: