关闭菜单子类别保留以前的div打开

此代码完美工作，但我必须添加一项功能：当单击属于子类别的链接时，以前的div必须保持打开状态。我试图试图隔离封闭只有当被点击的项目类别不同于list-group subitem collapse但它似乎不起作用。关闭菜单子类别保留以前的div打开

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/

来源

2014-10-01 Gabriele Salvatori

试试这个代码：

$(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(); 
     });  

    });

来源

2014-10-01 13:07:27 prog1011

它完美！谢谢！ – 2014-10-01 13:09:48

@GabrieleSalvatori - 很高兴帮助你:) – prog1011 2014-10-01 13:13:48

我觉得这适合您的需要：CodePen example

与此一替换您-if-：

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

我说得那么，如果你在该项目再次点击就可以崩溃。

来源

2014-10-01 12:59:51 EricG

关闭菜单子类别保留以前的div打开

回答

相关问题