Question

我有一个包含标签的可折叠元素，其中可折叠元素在标题文本的左侧有一个图标（图标 - 向下箭头）。折叠此元素时，图标将变为icon-arrow-up。它工作得很好，但是，当我在标签之间切换时，图标也会改变。

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

Answer 1

这是一个仅限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>

添加此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;
}

这是jsFiddle example。

Answer 2

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

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

Answer 3

您需要更改选择器：

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

对此：

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

您的#collapseH包含所有标签HTML，因此当您点击其中一个标签时，您也会点击#collapseH。因此，只有当用户点击箭头本身#collapseP时才会将选择器更改为火。

使用此

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

See Fiddle example

Answer 4

这是因为事件冒泡

$('#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);
    }
});

崩溃时Twitter引导程序更改图标

4 个答案: