javascript - 第一次单击 href 时出现 .collapse() 错误

Question

我对以下代码有一个奇怪的问题:http://jsfiddle.net/rc1chhtd/4/

实际上，第一次单击链接时，会为每个 div 而不是最后一个调用 collapse 方法。然后一切正常。有什么提示吗？

HTML

    <div class="col-md-3">

        <p class="lead">Menu</p>

        <div id="sidebar" class="list-group"> 

                <a href="#" class="list-group-item active" name="dashboard">
                    <i class="icon-dashboard"></i> Dashboard
                </a>

                <a href="#" class="list-group-item" name="a-s-c">
                    <i class="icon-group"></i> Arte Storia e Cultura
                </a>


                <a href="#enogastronomia" class="list-group-item"  data-parent="#sidebar" name="enogastronomia">
                    <i class="icon-group"></i> Enogastronomia
                    <span class="badge bg_danger">3</span>
                </a>

                    <div id="enogastronomia" class="list-group subitem collapse">    

                        <a href="#" class="list-group-item">
                            <i class="icon-caret-right"></i> Sub 1
                        </a>

                        <a href="#" class="list-group-item">
                            <i class="icon-caret-right"></i> Sub 2
                        </a>

                        <a href="#" class="list-group-item">
                            <i class="icon-caret-right"></i> Sub 3
                        </a>

                    </div> 

                <a href="#" class="list-group-item" name="artigianato">
                    <i class="icon-group"></i> Artigianato
                </a>


                <a href="#dovedormire" class="list-group-item"  data-parent="#sidebar" name="dovedormire">
                    <i class="icon-group"></i> Dove Dormire
                    <span class="badge bg_danger">4</span>
                </a>

                    <div id="dovedormire" class="list-group subitem collapse">    

                        <a href="#" class="list-group-item">
                            <i class="icon-caret-right"></i> Sub 1
                        </a>

                        <a href="#" class="list-group-item">
                            <i class="icon-caret-right"></i> Sub 2
                        </a>

                        <a href="#" class="list-group-item">
                            <i class="icon-caret-right"></i> Sub 3
                        </a>

                        <a href="#" class="list-group-item">
                            <i class="icon-caret-right"></i> Sub 4
                        </a>

                    </div> 

                <a href="#attivita" class="list-group-item"  data-parent="#sidebar" name="attivita">
                    <i class="icon-group"></i> Attività
                    <span class="badge bg_danger">4</span>
                </a>

                    <div id="attivita" class="list-group subitem collapse">    

                        <a href="#" class="list-group-item">
                            <i class="icon-caret-right"></i> Sub 1
                        </a>

                        <a href="#" class="list-group-item">
                            <i class="icon-caret-right"></i> Sub 2
                        </a>

                        <a href="#" class="list-group-item">
                            <i class="icon-caret-right"></i> Sub 3
                        </a>

                        <a href="#" class="list-group-item">
                            <i class="icon-caret-right"></i> Sub 4
                        </a>

                    </div> 

                <a href="#" class="list-group-item"  data-parent="#sidebar" name="meteo">
                    <i class="icon-group"></i> Meteo
                </a>

                <a href="#" class="list-group-item"  data-parent="#sidebar" name="numutili">
                    <i class="icon-group"></i> Numeri Utili
                </a>

                <a href="#" class="list-group-item"  data-parent="#sidebar" name="trasporti">
                    <i class="icon-group"></i> Trasporti
                </a>

        </div>

    </div>

JavaScript

$( document ).ready(function() {
     $('#contenuti').load('dashboard.php');
});

$('.list-group-item').click(function (){
    var clicked=this;
    $(".list-group a").each(function() {
        $(this).removeClass("active");
        $(this).next('div').collapse('hide');
        if($(this).attr("name")==$(clicked).attr("name")){
            $('#contenuti').load($(this).attr("name")+'.php');
            $(this).addClass("active");
            $(this).next('div').collapse('show');
        }
    });

});

Answer 1

有一些样式问题，但我建议您将逻辑更改为更像这样:

JSFIddle:http://jsfiddle.net/TrueBlueAussie/rc1chhtd/7/

$(document).ready(function () {
    $('#contenuti').load('dashboard.php');

    $('.list-group-item').click(function () {
        var $clicked = $(this);
        // Hide any active divs (only)
        $(".list-group a.active").removeClass("active").next("div").collapse("hide");
        // Find the target anchor based on the name attribute in the clicked item
        var $targeta = $('.list-group a[name="' + $clicked.attr("name") + '"]').addClass("active");
        // Load the panel based on the clicked item
        $('#contenuti').load($(this).attr("name") + '.php');
        // then open the clicked div
        $targeta.next('div').collapse('show');
    });
});

如果您有机会动态添加项目，请将点击处理程序更改为委托(delegate)事件处理程序附加到不变的祖先元素 - document 是默认值):

    $(document).on('click', '.list-group-item', function () {

更新:collapse 中似乎存在错误。如果该项目从未显示/折叠，则调用 collapse("hide") 似乎会将它们打开。我更改了代码以仅隐藏“事件”链接。