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

【问题标题】：toggle collapse bootstrap/css icon using jQuery when a href link is clicked单击href链接时使用jQuery切换折叠引导/ css图标
【发布时间】：2016-03-25 22:15:45
【问题描述】：

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

我有一个可折叠的

窗格，它由“加号/减号图标”或“课程描述链接”触发。两个触发器单独工作都很好。但是，单击“课程描述链接”时，我需要切换“加号/减号图标”。现在，单击链接时图标保持不变。

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

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

【问题讨论】：

标签： jquery css twitter-bootstrap toggle collapse

【解决方案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>

【讨论】：