0

クラスを持つさまざまな要素があります.folder

クリックすると、クラスが追加activeされ、他の要素からクラスが削除されます。

問題は、最初にクラスを他のクラスから削除することです。単にそれを行っていません。

これが私が試していることです：

$('.folder').click(function() {
    $(this).siblings('.folder').removeClass('active'); // remove from all other <SPAN>s
    $(this).addClass('active'); // add onto current
})

HTML の例:

<ul>
    <li class="closed last">
        <span class="folder" id="16">More coding</span>
    </li>
</ul>  
</li>
<li class="closed collapsable lastCollapsable">
    <span class="folder active" id="12">Music</span>
    <ul style="display: block;" id="browser" class="filetree treeview-famfamfam">
        <li class="closed collapsable">
            <span class="folder active" id="13">Music child</span>
                <ul style="display: block;" id="browser" class="filetree treeview-famfamfam">
                    <li class="closed last">
                        <span class="folder" id="15">More music</span>
                    </li>
                </ul>
         </li>
         <li class="closed last"><span class="folder" id="17">Another child here</span> </li>
     </ul>
    </li>
</ul>
4

3 に答える 3

0

ここで3つの可能な解決策。

1 つの基本:

$('span.folder').click(function() {
    $('.folder').removeClass('active');
    $(this).addClass('active');
})

少し速いもの：

$('.folder').click(function() {
    $('span.folder.active').removeClass('active');
    $(this).addClass('active');
})

最速ですが、他の要素がある場合は機能しません.active:

$('.folder').click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
})

JsPerf : http://jsperf.com/three-solutions

于 2013-10-05T18:30:05.090 に答える