Question

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

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

有人可以帮忙吗？

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

  。
$（ 'fruit_submenu'）隐藏（）; $（ 'veg_submenu。'）隐藏（）;

$（'li＃fruit'）。click（function（）{         $（ “fruit_submenu”）的slideToggle（）。         $（ 'veg_submenu。'）效果基本show（）; }）;

$（'li＃veg'）。点击（function（）{
  $(".veg_submenu").slideToggle();
  $('.fruit_submenu').slideUp();
}）;

$（'li＃snacks'）。点击（function（）{
  $('.fruit_submenu').hide('slow');
}）;

Answer 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

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

Jquery onclick关闭了来自不同李的幻灯片

2 个答案: