Как задать необходимое условие для горизонтального меню?

Question

[gcj]

Приветствую. Имеется следующая структура меню:

<menu>
  <ul>
    <li>
      <a href="" class="sub_mnu">Пункт меню</a>
       <ul class="sub_list">
         <li><a href="">Подпункт 1</a></li>
         <li><a href="">Подпункт 2</a></li>
         <li><a href="">Подпункт 3</a></li>
      </ul>
    </li>
    <li>
      <a href="" class="sub_mnu">Пункт меню 2</a>
      <ul class="sub_list">
        <li><a href="">Подпункт 1</a></li>
        <li><a href="">Подпункт 2</a></li>
      </ul>
    </li>
  </ul>
</menu>

И jQuery сценарий:

var $sub_mnu = $('.sub_mnu');
var $sub_list = $('.sub_list');
	$sub_mnu.on('click', function(event){
		$(this).parent('li').find('.sub_list').slideToggle(100);
		$(this).toggleClass('active');
		event.preventDefault();
	});

который раскрывает меню по клику на основной пункт.

Но проблема заключается в том, что если нажать на один пункт и не закрыть его, то при открытии другого пункта меню выпадающие подпункты накладываются друг на друга.
Задача: сделать так, чтобы при открытии одного пункта меню, другой закрывался.

Спасибо.

Answer 1

[gcj]

Решение нашел такое:

$('.sub_mnu').on('click', function(event){
		event.preventDefault();
		if(false==$(this).parent('li').find('.sub_list').is(':visible')) {
				$('.sub_list').slideUp(100);
				$('.sub_mnu').removeClass('active');
		}
		$(this).parent('li').find('.sub_list').slideToggle(100);
		$(this).toggleClass('active');
	});

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

Answer 2

[Vmedmen]

Сделайте принудительное закрытие всех .sub_list перед раскрытием эелемента по которому кликнули

Comments

[gcj]

Ну я поэтому и спрашиваю, что не знаю как это сделать)

[Егор Рублёв]

А зачем вообще было использовать jquery?
$(this).toggleClass('active'); // Я так думаю, это открывает меню. Над этой строчкой добавьте:
$($sub_mnu).removeAttr('class'); // Попробуйте так.

[Егор Рублёв]

gcj: ап

Answer 3

[Bowen]

Если я вас правильно понял:
HTML структура желательно чтобы была такая.

<menu class="menu">
  <ul>
    <li>
      <span class="sub_menu">Пункт меню</span>
       <ul class="sub_list">
         <li><a href="">Подпункт 1</a></li>
         <li><a href="">Подпункт 2</a></li>
         <li><a href="">Подпункт 3</a></li>
      </ul>
    </li>
    <li>
      <span class="sub_menu">Пункт меню 2</span>
      <ul class="sub_list">
        <li><a href="">Подпункт 1</a></li>
        <li><a href="">Подпункт 2</a></li>
      </ul>
    </li>
  </ul>
</menu>

jQuery:

var $mainMenu = $('.menu'),
$subMenu = $('.sub_menu'),
$subList = $('.sub_list'),
className = 'active',
speed = 100;
$mainMenu.on('click', $subMenu, function(e){
	$subMenu.removeClass(className);
	$subList.slideUp(speed);
	$(e.target).addClass(className).next($subList).slideDown(speed);
});

P.S. Что за привычка в качестве кнопки использовать пустые ссылки ?

Comments

[gcj]

Это не привычка, на самом деле ссылки не пустые. Просто привел в качестве примера, чтобы было больше похоже на оригинал.

[Bowen]

gcj: Это не привычка, на самом деле ссылки не пустые.
Если они не пустые, какой смысл блокировать переход по ним?

[gcj]

Bowen: одним словом: SEO.