来自不同李的Jquery onclick关闭slideUp答案

【问题标题】：Jquery onclick close slideUp from different Li来自不同李的Jquery onclick关闭slideUp
【发布时间】：2013-12-17 23:38:01
【问题描述】：

我有一个菜单，其中一些元素向上滑动和滑动切换。因此，如果水果是打开的，我点击蔬菜，它会打开，而水果会关闭。这一切都很好。 “小吃”没有子菜单，但我希望它的行为与其他两个相同。所以如果我点击零食并且任何其他子菜单打开，它会以相同的幻灯片效果关闭它们。

目前我将它隐藏（慢），但水平隐藏元素，而不是向上/向下滑动。

谁能帮忙？

http://jsfiddle.net/Alga/H3Y4Q/2/

$('.fruit_submenu').hide(); $('.veg_submenu').hide();

$('li#fruit').click(function () { $(".fruit_submenu").slideToggle(); $('.veg_submenu').slideUp(); });

$('li#veg').click(function () {
  $(".veg_submenu").slideToggle();
  $('.fruit_submenu').slideUp();
});

$('li#snacks').click(function () {
  $('.fruit_submenu').hide('slow');
});

【问题讨论】：

您的标记无效，您不能将 UL 作为另一个 UL 的子级。

标签： jquery show-hide slidetoggle slideup

【解决方案1】：

先修复标记，因为它是无效的

<ul class="menu">
    <li id="fruit">Fruit
        <ul class="fruit_submenu">
            <li>Apples</li>
            <li>Bananas</li>
            <li>Pears</li>
        </ul>
    </li>
    <li id="snacks"><a href="#">Snacks</a>
    </li>
    <li id="veg">Vegetables
        <ul class="veg_submenu">
            <li>Beans</li>
            <li>Spinach</li>
        </ul>
    </li>
</ul>

你可以这样做

$('.menu [class$="_submenu"]').hide();
$('.menu li').on('click', function () {
    $(this).siblings('li').find('ul').slideUp();
    $('[class$="_submenu"]', this).slideToggle();
});

FIDDLE

【讨论】：

【解决方案2】：

您切换的方式并不理想，如果您在每次点击时循环遍历所有“li”元素，则可以避免指定打开/关闭哪些元素。这也将使其在未来易于扩展。

也就是说……您的问题的快速答案如下：

  $('.fruit_submenu').hide();
  $('.veg_submenu').hide();

  $('li#fruit').click(function () {
      $(".fruit_submenu").slideToggle();
      $('.veg_submenu').slideUp();
  });


  $('li#veg').click(function () {
      $(".veg_submenu").slideToggle();
      $('.fruit_submenu').slideUp();
  });

  $('li#snacks').click(function () {
      //force the other elements to slide up no matter their state.
      $('.fruit_submenu').slideUp();
      $('.veg_submenu').slideUp();
  });

【讨论】：