单击 href link 时使用 jQuery 切换折叠 bootstrap/css 图标

Question

我是 bootstrap/css 和 jQuery 的新手。我已经尝试了在这里找到的几种解决方案，但无法弄清楚我做错了什么。

我有一个可折叠的 < div > 窗格，它由 "plus/minus icon" 或 "course description link" 触发。这两个触发器在dividually 中工作得很好。但是，我需要在单击 "course description link" 时切换 "plus/minus icon"。现在，单击 link 时图标保持不变。

注意：我更喜欢使用 "btn icon" class，因为它似乎使图标显示更好。

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>

Bootstrap/CSS:

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

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

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: "12";
}

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

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

单击 href link 时使用 jQuery 切换折叠 bootstrap/css 图标

toggle collapse bootstrap/css icon using jQuery when a href link is clicked

jquery

css

twitter-bootstrap

toggle

collapse