Question

我遇到以下代码的奇怪问题：http://jsfiddle.net/rc1chhtd/4/

实际上，第一次点击链接时，会为每个div而不是最后一个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');
    });
});

如果您有可能动态添加项目，请将点击处理程序更改为附加到不变的祖先元素的委托事件处理程序 - document是默认的）：

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

更新： collapse中似乎存在错误。如果该项目从未显示/折叠，则调用collapse("hide")似乎会将其切换为打开状态。我将代码更改为仅隐藏“活动”链接。

第一次单击href时出现.collapse（）错误

1 个答案: