jQuery: выбор только ul, а не ul ul - PullRequest
Новая
       29

jQuery: выбор только ul, а не ul ul

1 голос
/ 09 июля 2011

Я пытаюсь превратить основное меню стиля аккордеона в представление - используя jQuery.

Вот меню:

http://www.cybart.com/bscg/

Вот фрагмент кода, который дает ему функциональность аккордеона: 

$('#access ul li').click(function(){
        $('#access ul ul:visible').slideUp();
        $(this).children('ul:hidden').slideDown();

    });

Проблема: щелчок по ссылке подменю заставляет подменю скользить вверх (и закрываться).

Я хочу, чтобы подменю оставалось открытым при нажатии на ссылку подменю, и скользить вверх только при верхнем уровнессылки нажимаются.

Как я могу выбрать только верхний уровень ul с помощью jQuery для анимации подменю?Или есть способ выбрать ссылку в подменю и «сказать ей», чтобы подменю оставалось открытым?

Буду признателен за вашу мудрость!

Ответы [ 4 ]

4 голосов
/ 09 июля 2011

Кажется, что вам нужно использовать оператор > в CSS.

.foo > .bar выбирает все элементы с классом bar, который является прямым потомком элемента с классом foo

Понял, рабочий код: 

$('#access ul.menu > li > a').click(function(){
        $('#access ul ul:visible').slideUp();
        $(this).siblings('ul').slideDown();
    });
});

Чтобы не допустить повторного скольжения меню, это работает: 

$('#access ul.menu > li > a').click(function(){
        var siblingUl = $(this).siblings('ul');
        if(siblingUl.is(':visible')) { // The currently open menu was clicked
            // Remove this if you want nothing to happen
            siblingUl.slideUp();
            return;
        }

        $('#access ul ul:visible').slideUp();
        siblingUl.slideDown();
    });
});
0 голосов
/ 17 марта 2014

Это намного проще и работает для меня. 

$(".parent").click(function() {
   $(this).children('ul').slideToggle();
});
0 голосов
/ 10 июля 2011

Вы не можете остановить закрытие меню, потому что браузер делает новый запрос и загружает меню заново, когда вы нажимаете на ссылки.Просто посмотрите на строку URL.Когда вы нажимаете на ссылки подменю, URL-адрес изменяется.

Вам нужно будет что-то добавить к URL-адресу, чтобы остановить свертывание подменю, или протестировать URL-адрес, чтобы увидеть, следует ли его повторно открыватьбаян после загрузки страницы.

0 голосов
/ 09 июля 2011

Мне потребовалось 10 минут, чтобы прочитать и понять ваш код, потому что у вас много стилей и идентификаторов, и это сильно усложняет его, позаботьтесь о лучших практиках

Все, что вам нужно, это что-то вроде 

<ul>
  <li>
   <a class="menu">Menu</a>
    <ul>
       <li><a>Submenu</a></li>
    </ul>
  </li>
  <li>Other menu</li>
</ul>

...

$(document).ready(function(){

  $(".menu").click(function(){
      $(this).next().toggle()
  })

})
...