5

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

这是我的 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>
4

4 回答 4

20

这是一个纯 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 示例。

于 2014-04-25T18:59:01.380 回答
3

当您单击选项卡时，似乎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);
});
于 2013-03-01T06:42:36.307 回答
2

您需要从此更改选择器：

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

参见小提琴示例

于 2013-03-01T06:29:38.833 回答
1

这是因为事件冒泡

$('#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);
    }
});
于 2013-03-01T06:46:37.270 回答