单击href链接时，使用jQuery切换折叠引导/css图标

Question

我对引导/css和jQuery很陌生。我在这里尝试过几种解决方案，但不知道我做错了什么。

我有一个可折叠的< div >窗格，它由“加/减”图标或“课程描述链接”触发。这两种触发器各自都发挥了很大作用。但是，当单击“课程描述链接”时，我需要切换“加/减”图标。现在，当点击链接时，图标就会保持不变。

注意:我更喜欢使用"btn图标“类，因为它似乎会使图标显示得更好。

HTML：

<div>
    <h4 id="show_pane">
        <span class="btn icon" data-toggle="collapse" 
             data-target="#wrapper_ABC100" id="plus_minus_icon"></span>
        <a id="course_link" href="#wrapper_ABC100" data-toggle="collapse" 
             data-parent="#wrapper_ABC100">ABC100 - Test Course 100</a>
    </h4>
</div>

<div id="wrapper_ABC100" style="height: auto;">
    <p>My collapsible pane - description for course ABC100</p>
</div>

引导程序/CSS：

/* Icon when the collapsible content is show */
.btn.icon:after {
    font-family: "Glyphicons Halflings";
    content: "\2212";
}

/* Icon when the collapsible content is hidden */
.btn.icon.collapsed:after {
    content: "\2b";
}

jQuery：

    $('#show_pane').click(function(){
        $('#course_link').toggle('1000');
        $("span",this).toggleClass("icon-circle-plus icon-plus-sign");
    });

Answer 1

​

$(function() {
  $('#show_pane').click(function(){
        $(".btn.icon").toggleClass("collapsed");
        var paneDiv = $(this).find("a").attr("href");
        $(paneDiv).toggle('1000');
    });
  });

/* Icon when the collapsible content is show */
.btn.icon:after {
    font-family: "Glyphicons Halflings";
    content: "\2212";
}

/* Icon when the collapsible content is hidden */
.btn.icon.collapsed:after {
    content: "\2b";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">

<div>
    <h4 id="show_pane">
        <span class="btn icon" data-toggle="collapse" 
             data-target="#wrapper_ABC100" id="plus_minus_icon"></span>
        <a id="course_link" href="#wrapper_ABC100" data-toggle="collapse" 
             data-parent="#wrapper_ABC100">ABC100 - Test Course 100</a>
    </h4>
</div>

<div id="wrapper_ABC100" style="height: auto;">
    <p>My collapsible pane - description for course ABC100</p>
</div>

​