Question

此代码完美无缺，但我添加了一项功能：当点击属于子类别的链接时，前一个div必须保持打开状态。只有当点击的项目的类别与 list-group subitem 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 e Storia
                </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" name="ristoranti">
                            <i class="icon-caret-right"></i> Ristoranti
                        </a>

                        <a href="#" class="list-group-item" name="prodottitip">
                            <i class="icon-caret-right"></i> Prodotti Tipici
                        </a>

                        <a href="#" class="list-group-item" name="ricette">
                            <i class="icon-caret-right"></i> Ricette
                        </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" name="hotel">
                            <i class="icon-caret-right"></i> Hotel
                        </a>

                        <a href="#" class="list-group-item" name="b&b">
                            <i class="icon-caret-right"></i> B&B
                        </a>

                        <a href="#" class="list-group-item" name="agriturismo">
                            <i class="icon-caret-right"></i> Agriturismo
                        </a>

                        <a href="#" class="list-group-item" name="casevacanze">
                            <i class="icon-caret-right"></i> Case Vacanze
                        </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" name="percorsi">
                            <i class="icon-caret-right"></i> Percorsi
                        </a>

                        <a href="#" class="list-group-item" name="dintorni">
                            <i class="icon-caret-right"></i> Dintorni
                        </a>

                        <a href="#" class="list-group-item" name="sport">
                            <i class="icon-caret-right"></i> Sport
                        </a>

                        <a href="#" class="list-group-item" name="svago">
                            <i class="icon-caret-right"></i> Svago
                        </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);

            if ($clicked.attr("class") != 'list-group subitem collapse'){  
            $(".list-group a.active").removeClass("active").next("div").collapse("hide");
            }

            var $targeta = $('.list-group a[name="' + $clicked.attr("name") + '"]').addClass("active");

            $('#contenuti').load($(this).attr("name") + '.php');
            $targeta.next('div').collapse('show');
        });     

    });

JSFiddle ：http://jsfiddle.net/L8k2apu5/8/

Answer 1

我认为这符合您的需求：CodePen example

将--if-替换为： -

if($clicked.hasClass("active")) {
    $clicked.removeClass("active").next("div").collapse("hide");
    return;
}

我这么做是为了你再次点击该项目就可以崩溃。

Answer 2

试用此代码：

   $(document).ready(function () {

        $('#contenuti').load('dashboard.php');

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

            var $clicked = $(this);

            if ($clicked.attr("class") != 'list-group subitem collapse'){

            $(".list-group a.active").removeClass("active").next("div").not($(this).closest('div')).collapse("hide");
            }

            var $targeta = $('.list-group a[name="' + $clicked.attr("name") + '"]').addClass("active");

            $('#contenuti').load($(this).attr("name") + '.php');
            $targeta.next('div').collapse('show');
            //$(this).closest('div').show();
        });     

    });

关闭菜单子类别，保持前一个div打开

2 个答案: