5

タブを含む折りたたみ可能な要素があります。折りたたみ可能な要素には、ヘッダー テキストの左側にアイコン (icon-arrow-down) があります。この要素を折りたたむと、アイコンが 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

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 をラップしているので、タブの 1 つをクリックすると、 もクリックされ#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 に答える