Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.03.2015, 16:31
Интересующийся
Отправить личное сообщение для helgajijka Посмотреть профиль Найти все сообщения от helgajijka
 
Регистрация: 23.03.2015
Сообщений: 27

Проблема с toogleClass при выделении активной сылки по нажатию
Помогите разобраться, пожалуйста.
Есть меню, по нажатию на ссылку - выпадающий блок (используется пара аттрибутов data-). Необходимо по нажатию добавить класс ссылке, а по повторному нажатию убрать этот класс. Использую данный код, но при повторном нажатии класс не убирается.
<!--использую navbar bootstrap -->
<ul class="menu-main-nav">
<li><a class="menu-main-item" href="#" data-item="menu-restoran">Для ресторанов<i class="main-choise"></i></a></li>
<li><a class="menu-main-item" href="#" data-item="menu-trade">Для торговли<i class="main-choise"></i></a></li>
<li><a class="menu-main-item" href="#" data-item="menu-equipment">Торговое оборудование<i class="main-choise"></i></a></li>
</ul>
<!--Блок выпадающего мегаменю</i> -->
<div class="menu-mega" id="menu-restoran">
	<nav>
		<div class="menu-mega-row">
			<div class="menu-mega-block">
				<a class="menu-mega-item" href="#">Ресторан</a>
			</div>
			<div class="menu-mega-block">
				<a class="menu-mega-item" href="#">Управление</a>
			</div>
			<div class="menu-mega-block">
				<a class="menu-mega-item" href="#">Фастфуд</a>
			</div>
			<div class="menu-mega-block">
				<a class="menu-mega-item" href="#">Ресторанная сеть</a>
			</div>
		</div>
	</nav>
</div>
<!-- тут дальше еще три блока  -->




$(function() {

  var items = $(".menu-main-item"); //ссылка по которой идет нажатие
  var block = $(".menu-mega"); //выпадающий блок
  $(items).on('click', function () {
    var DataItem = $(this).attr('data-item');
    var current = $('#'+ DataItem);
    $(block).not(jQuery(current)).slideUp();
    $(current).slideToggle();          //выпадающий блок
    $(items).removeClass('active-menu-item');
     $(this).toggleClass('active-menu-item'); //класс активной ссылки
     return(false);
  });
  jQuery('body').click(function(){
		jQuery(block).slideUp();
		jQuery(items).removeClass('active-menu-item'); //спрятать                //блок и удалить класс по нажатию вне меню
  });
  jQuery(block).click(function (e) { e.stopPropagation(); }); //отменить
 //событие на клик в выпадающем блоке
});



Смысле в том, чтобы по нажатию на определенную ссылку появлялся соответствующий блок мега меню и у ссылки добавлялся класс (в этом классе css треугольник внизу ). При повторном нажатии блок мега-меню скрывается, класс удаляется. При этом если нажать на соседнюю ссылку, то у предыдущей класс удаляется, ну и т.п.

С этим кодом у меня блок с выпадающим мега меню работает как нужно, но класс у ссылки работает так - при нажатии появляется, при повторном нажатии не удаляется, при нажатии на соседнюю ссылку удаляется.

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

Последний раз редактировалось helgajijka, 23.03.2015 в 23:51.
Ответить с цитированием
  #2 (permalink)  
Старый 23.03.2015, 16:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,792

Сообщение от helgajijka
jQuery(block).slideUp(options);
что это options?
Ответить с цитированием
  #3 (permalink)  
Старый 23.03.2015, 16:47
Интересующийся
Отправить личное сообщение для helgajijka Посмотреть профиль Найти все сообщения от helgajijka
 
Регистрация: 23.03.2015
Сообщений: 27

Это были опции для функций slideUp, slideDown, я удалила)
Ответить с цитированием
  #4 (permalink)  
Старый 23.03.2015, 17:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,792

helgajijka,
html сделайте минимальный
Ответить с цитированием
  #5 (permalink)  
Старый 24.03.2015, 01:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,792

Открывашка 204 + закрытие по клику вне блока или кнопок
helgajijka,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .active-menu-item{background: #FFE4B5;}
    div.menu-mega{display:none; width:600px;height:200px;}
	div.menu-main-item{display:block; width:200px; height:100px;  border:1px solid #333;}
    #menu-restoran{background-color: green}
	#menu-trade{background-color: pink}
	#menu-equipment{background-color: blue}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
    $(function() {
    var $but = $(".menu-main-item"),
        $blocks = $(".menu-mega");
    $but.each(function(i, elem) {
        var $el = $(elem);
        $el.click(function() {
            $but.not($el).removeClass("active-menu-item");
            $el.toggleClass("active-menu-item");
            $blocks.filter(function(j, el) {
                i == j && $(el).slideToggle();
                return i != j
            }).slideUp();
        })
    });
    $('html').click(function (event) {
          if ($(event.target).closest('.menu-main-item, .menu-mega' ).size()) return;
          $but.filter('.active-menu-item').click()
      });
});
  </script>
</head>

<body>
    <!--использую navbar bootstrap -->
<ul class="menu-main-nav">
<li><a class="menu-main-item" href="#" data-item="menu-restoran">Для ресторанов<i class="main-choise"></i></a></li>
<li><a class="menu-main-item" href="#" data-item="menu-trade">Для торговли<i class="main-choise"></i></a></li>
<li><a class="menu-main-item" href="#" data-item="menu-equipment">Торговое оборудование<i class="main-choise"></i></a></li>
</ul>
<!--Блок выпадающего мегаменю</i> -->
<div class="menu-mega" id="menu-restoran">
	    test 1
</div>
<!-- тут дальше еще три блока  -->
<div class="menu-mega" id="menu-trade">
	    test 2
</div>
<div class="menu-mega" id="menu-equipment">
	    test 3
</div>
</body>

</html>

Последний раз редактировалось рони, 24.03.2015 в 01:16.
Ответить с цитированием
  #6 (permalink)  
Старый 24.03.2015, 01:25
Интересующийся
Отправить личное сообщение для helgajijka Посмотреть профиль Найти все сообщения от helgajijka
 
Регистрация: 23.03.2015
Сообщений: 27

Спасибо Вам огромное за помощь!
Пойду воплощать Ваш код в жизнь.
Ответить с цитированием
  #7 (permalink)  
Старый 24.03.2015, 01:40
Интересующийся
Отправить личное сообщение для helgajijka Посмотреть профиль Найти все сообщения от helgajijka
 
Регистрация: 23.03.2015
Сообщений: 27

работает урраа! Спасибо еще раз!
Ответить с цитированием
  #8 (permalink)  
Старый 24.03.2015, 01:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,792

helgajijka,
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема при инициализации событий sms9 Events/DOM/Window 2 21.01.2010 22:14
проблема обновления при удалении стиля taland Элементы интерфейса 1 21.10.2009 18:34
Проблема при работе с плагином jQuery Map Hilight REp0rtER jQuery 3 29.07.2009 22:10
Проблема при перезаписи iframe spheresh Общие вопросы Javascript 3 23.06.2009 18:06
Проблема в document.write при использовании setInterval() GOll Общие вопросы Javascript 21 06.10.2008 17:38