Question

当div处于glyphicon-chevron-down状态时我有collapsed，当div处于glyphicon-chevron-up状态时，我想用collapse in替换它。我有很多这样的{ {1}}我的项目中的div。所以我需要collapsible toggle按下特定的collapsibe内容（或div）。

HTML

glyphicon

的JavaScript

<div class="divcontainer"> 
    <span>Click -----></span>
    <span class="glyphicon glyphicon-chevron-down" data-toggle="collapse" href="#collapsecontent"></span>
</div>
<div class="collapse" id="collapsecontent">
    content
</div>

小提琴here

5 个答案:

答案 0 :(得分：3)

答案 1 :(得分：2)

答案 2 :(得分：1)

答案 3 :(得分：1)

答案 4 :(得分：1)

Answer 1

你的JS正在强调错误的东西。 Find非常缓慢，如果可能的话，最好避免使用 - 这在这里很有可能。只需将其更改为：

$(document).ready(function () {
    $('.glyphicon').click(function () {
        $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
    });
});

JS小提琴：http://jsfiddle.net/ft4mnynh/

Answer 2

尝试FIDDLE，

我更改了下面的选择器和事件

$(document).ready(function () {
    $('.divcontainer').click(function () {
        $(this).find("span:eq(1)")
            .toggleClass('glyphicon-chevron-down')
            .toggleClass("glyphicon-chevron-up");
    });
});

希望这有帮助

Answer 3

使用以下jquery代码，只需根据需要更改glyphicon名称

＆＃13;

<script>
	$('.collapse').on('shown.bs.collapse', function(){
		$(this).parent().find(".glyphicon-menu-right").removeClass("glyphicon-menu-right").addClass("glyphicon-menu-down");
			}).on('hidden.bs.collapse', function(){
			$(this).parent().find(".glyphicon-menu-down").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-right");
	});
</script>

＆＃13;

Answer 4

您需要切换班级chevron-up和chevron-down。您可以使用更通用的glyphicon类找到正确的div。

我还在div中添加了ID，因此您无需通过down类

找到它

请参阅：http://jsfiddle.net/amwLaojj/1/

$(document).ready(function () {
    $('#myglyph').click(function () {
        $(this).parent("div").find(".glyphicon")
            .toggleClass("glyphicon-chevron-up")
            .toggleClass("glyphicon-chevron-down");
   });
});

更新

您可以使用：

代替ID

$('.glyphicon[data-toggle=collapse]').click(function () {

更新于：http://jsfiddle.net/amwLaojj/3/

Answer 5

以下代码对我有用。据我所知，bootstrap js事件只会触发＆＃34; div.collapse＆＃34;元素，即隐藏和显示的块。即使是jquery＆＃34;点击＆＃34;事件在＆＃34; div.panel-heading＆＃34;或者任何孩子没有反应。

<div class="panel-heading" role="tab" id="headingOne">
   <h4 class="panel-title">
   <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
     Getting Started
   <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
    <a id="choosing">Choosing a topic</a>
    <a id="exploring">Exploring a topic</a>
</div></div>

<强> JQuery的

$(document).ready(function () {
    $('div.collapse').on("show.bs.collapse || hide.bs.collapse", function () {
      let glyph = $(this).siblings("div.panel-heading").find('span.glyphicon');
      glyph.hasClass("glyphicon-menu-right") ?   glyph.toggleClass("glyphicon-menu-down") :   glyph.toggleClass("glyphicon-menu-right");
    });
});

使用引导程序折叠切换glyphicon

5 个答案: