JQuery onclick закрыть слайд-ап из разных ли

Question

У меня есть меню, в котором некоторые элементы скользят вверх и переключаются. Итак, если фрукт открыт, и я нажимаю на овощи, он открывается, а фрукты закрываются. Все работает нормально. «Закуски» не имеют подменю, но я хочу, чтобы оно вело себя так же, как два других. Поэтому, если я нажму на закуски и открыты любые другие подменю, они закроются с тем же эффектом слайда.

На данный момент он у меня включен (медленно), но он скрывает элементы по горизонтали, а не со скольжением вверх / вниз.

Кто-нибудь может помочь?

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

$ ('. fruit_submenu'). hide (); $ ('. veg_submenu'). скрыть ();

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

jquery show-hide slidetoggle slideup

1

Alga 18 Дек 2013 в 03:38

Answer 1

Способ переключения не идеален, и вы можете избежать необходимости указывать, какие элементы открывать / закрывать, если вы перебираете все элементы 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();
  });

0

DMortensen 17 Дек 2013 в 23:46

Answer 2

Сначала исправьте разметку, так как она недействительна

<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

adeneo 17 Дек 2013 в 23:48

JQuery onclick закрыть слайд-ап из разных ли

2 ответа

Похожие вопросы

Новые вопросы

jquery