twitter-bootstrap 折叠时 Twitter 引导程序更改图标

Twitter bootstrap change icon on collapse

提问by Smguy9

I have a collapsable element which contains tabs, where the collapsable element has an icon (icon-arrow-down) at the left side of the header text. When you collapse this element the icon changes to icon-arrow-up. It works great, but, when I change between tabs, the icon changes too.

我有一个包含选项卡的可折叠元素，其中可折叠元素在标题文本的左侧有一个图标（图标向下箭头）。当您折叠此元素时，图标将更改为向上箭头图标。效果很好，但是，当我在选项卡之间切换时，图标也会发生变化。

Here is my jsFiddle: http://jsfiddle.net/m6R44/

这是我的 jsFiddle：http: //jsfiddle.net/m6R44/

<div class="well">
    <h3>
        <span class="icon-arrow-down" data-toggle="collapse" data-target="#collapseH" id="collapseP"></span>
        <a href="#">Lorem Ipsum</a>
    </h3>
    <div id="collapseH" class="collapse in">
        <ul class="nav nav-tabs" id="ic_tabs">
            <li class="active"><a href="#paragraph1" data-toggle="tab">Paragraph 1</a></li>
            <li><a href="#paragraph2" data-toggle="tab">Paragraph 2</a></li>
            <li><a href="#paragraph3" data-toggle="tab">Paragraph 3</a></li>
        </ul>
        <div id="ic_tabsContent" class="tab-content">
            <div class="tab-pane fade in active" id="paragraph1">
                content 1
            </div>
            <div class="tab-pane fade" id="paragraph2">
                content 2
            </div>
            <div class="tab-pane fade" id="paragraph3">
                content 3
            </div>
        </div>
    </div>
</div>
<script>
    $('#collapseH').on('show hide', function(e){
        $('#collapseP').toggleClass('icon-arrow-up icon-arrow-down', 200);
    });
</script>

回答by CharlieNoTomatoes

Here is a CSS-only solution. Change your toggle to this:

这是一个仅限 CSS 的解决方案。将您的切换更改为：

<span class="arrow-toggle" data-toggle="collapse" data-target="#collapseH" id="collapseP">
    <span class="icon-arrow-down"></span>
    <span class="icon-arrow-up"></span>
</span>

Add this CSS to change the icon based on the collapsed state:

添加此 CSS 以根据折叠状态更改图标：

.arrow-toggle .icon-arrow-down,
.arrow-toggle.collapsed .icon-arrow-up {
    display: inline-block;
}
.arrow-toggle.collapsed .icon-arrow-down,
.arrow-toggle .icon-arrow-up {
    display: none;
}

Here is a jsFiddle example.

这是一个jsFiddle 示例。

回答by sissonb

Looks like the showevent is fired when you click the tabs. If you add a check for the id being equal to collapseH before switching the arrow that should fix it. Here's a fiddle doing that.

看起来show当您单击选项卡时会触发该事件。如果在切换应该修复它的箭头之前添加检查 id 是否等于 collapseH。这是一个小提琴。

http://jsfiddle.net/m6R44/3/

http://jsfiddle.net/m6R44/3/

$('#collapseH').on('show hide', function (e) {
    //if($(e.target).attr("id") != "collapseH")return;
    if(!$(this).is(e.target))return; // from Arun P Johny
    $('#collapseP').toggleClass('icon-arrow-up icon-arrow-down', 200);
});

回答by Arun P Johny

It is because of event bubling

这是因为事件冒泡

$('#collapseH').on('show hide', function(e){
    console.log(this, e.target, e.currentTarget)
    if($(this).is(e.target)){
        $('#collapseP').toggleClass('icon-arrow-up icon-arrow-down', 200);
    }
});

回答by Silagy

You need to change your selector from this:

您需要从此更改选择器：

$('#collapseH').on('show hide', function(e){

To this:

对此：

 $('#collapseP').on('click', function(e){

Your #collapseHis wrap all the tabs HTML, so when you click one one of the tabs you also clicks on #collapseH. So i change the selector to be fire only when the users clicks on the arrow itself #collapseP.

您#collapseH将所有选项卡都封装在 HTML 中，因此当您单击其中一个选项卡时，您也会单击#collapseH。所以我将选择器更改为仅当用户单击箭头本身时才触发#collapseP。

Use this

用这个

$('#collapseP').on('click', function(e){
            $('#collapseP').toggleClass('icon-arrow-down , icon-arrow-up', 200);
});

See Fiddle example

见小提琴示例