Jquery slideUp 未触发

Question

大家好，我正在尝试使用此 HTML:

创建一个带有手风琴的视图

<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() 效果完美，但 slideUp() 效果不佳。它向下滑动，但是当我点击另一个项目时，slideUp 没有触发，它只是隐藏起来没有任何效果。

有人知道为什么吗？谢谢

Answer 1

像下面那样做（只有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

Answer 2

你好使用下面的代码

$(".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

fiddle demo

Jquery slideUp 未触发

Jquery slideUp not triggering

html

javascript

css

jquery

slide