jQuery的效果基本show不觸發

嗨我試圖創建一個視圖使用此HTML手風琴：jQuery的效果基本show不觸發

<ul class="left_menu_list"> 
    <li class="left_menu_item active" data-item="firma"> 
    <div>LA FIRMA</div> 
    <ul class="firma_list secondary_list"> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA firma_list</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
    </ul> 
    </li> 
    <li class="left_menu_item" data-item="areas"> 
    <div>ÁREAS E INDUSTRIAS</div> 
    <ul class="areas_list hidden secondary_list"> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA areas_list</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
    </ul> 
    </li> 
    <li class="left_menu_item" data-item="oficinas"> 
    <div>OFICINAS</div> 
    <ul class="oficinas_list hidden secondary_list"> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA oficinas_list</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
    </ul> 
    </li> 
    <li class="left_menu_item" data-item="equipo"> 
    <div>EQUIPO</div> 
    <ul class="equipo_list hidden secondary_list"> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA equipo_list</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
    </ul> 
    </li> 
    <li class="left_menu_item" data-item="compromiso"> 
    <div>COMPROMISO</div> 
    <ul class="compromiso_list hidden secondary_list"> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA compromiso_list</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
    </ul> 
    </li> 
    <li class="left_menu_item" data-item="comunicacion"> 
    <div>COMUNICACIÓN</div> 
    <ul class="comunicacion_list hidden secondary_list"> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA comunicacion_list</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
    </ul> 
    </li> 
    <li class="left_menu_item" data-item="empleo"> 
    <div>EMPLEO</div> 
    <ul class="empleo_list hidden secondary_list"> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA empleo_list</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
    </ul> 
    </li> 
    <li class="left_menu_item" data-item="alumni"> 
    <div>ALUMNI</div> 
    <ul class="alumni_list hidden secondary_list"> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA empleo_list</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
     <li class="secondary_list_item">LA FIRMA</li> 
    </ul> 
    </li> 
</ul>

有了這個CSS：

.left_menu_list{ 
     .left_menu_item{ 
      .secondary_list{ 
      display: none; 
      position: relative; 
      background: @white; 
      margin-top: 0; 
      left: -4.42vw; 
      width: 100%; 
      top: 0; 
      padding-left: 4.42vw; 
      .secondary_list_item{ 
       margin-left: 20px; 
      } 
      } 
}

我已經創造了一些JS代碼，試圖創建效果：

$('.left_menu_item').click(function(){ 
    if(false == $(this).children('ul').is(':visible')) { 
     $(this).children('ul').slideUp(300); 
    } 
    $(this).children('ul').slideToggle(); 
});

的主要問題是了slideDown（）效果完美的作品，但在效果基本show（）一個不WO RKS。它會使滑塊向下滑動，但是當我點擊另一個項目時，slideUp不會觸發，它只會隱藏並且不起作用。

有誰知道爲什麼？謝謝。

來源

2017-05-25 Sergio González

你可以嘗試簡單切換幻燈片嗎？所以使用slideToggle（）代替slideDown（）slideUp（） –

你的代碼看起來很好。「if」條件從不計算爲真，從而總是調用'slideToggle（）' –

做到像下面（只有3行代碼）： -

$('.left_menu_item').click(function(){ 
    $(this).children('ul').slideToggle(); 
    $('.left_menu_item').not(this).children('ul').slideUp(); 
});

注： - 由你出CSS是錯誤的。相應地改變它，就像我在我的回答中一樣

此外，您可以提供一些時間跨度，如slideToggle(500)和slideUp(500)，以使其有點窒息。

工作示例與您的代碼： -

https://jsfiddle.net/b8ww8q8L

來源

2017-05-25 09:35:12

招呼使用下面的代碼

$(".left_menu_list > li > div").click(function(){ 
if(false == $(this).next().is(':visible')) { 
    $('.left_menu_list ul').slideUp(300); 
} 
$(this).next().slideToggle(300); 
}); 
$('.left_menu_list ul:eq(0)').show();

看到下面的小提琴

fiddle demo

來源

2017-05-25 09:57:36

jQuery的效果基本show不觸發

回答

相關問題