Добавить класс в активное меню при щелчке

Когда я нажимаю на родительское меню (например, Домены), он показывает, что это дети, когда я нажимаю один из них (например, «Мои домены»), страница перезагружается с закрытым родительским меню (не расширена , как изображение ржали)Добавить класс в активное меню при щелчке

классы "активны" для меню активного (синий фон) и "открыть" для видимых детей

Bug

это JS коды:

// Handle clicking on the naviagtion dropdown items 
    jQuery('.navbar .toggle > a').click(function() { 
    if (!jQuery(this).next().is(":visible")) { 
     jQuery('.toggle a').removeClass('open'); 
     jQuery('.toggle ul:visible').hide(); 
    } 
    jQuery(this).toggleClass('open'); 
    jQuery(this).next().slideToggle(); 
    }); 

    // Tabs Changer 
    // =============================== 
    //Default Action 
    jQuery(".tab-content").hide(); //Hide all content 
    if (jQuery(location).attr('hash').substr(1)!="") { 
     var activeTab = jQuery(location).attr('hash'); 
     jQuery("ul").find('li').removeClass('open'); 
     jQuery("ul.nav li").removeClass("active"); //Remove any "active" class 
     jQuery(activeTab+"nav").addClass("active"); 
     jQuery(activeTab).show(); 
    } else { 
     jQuery("#tabs ul.nav .nav-tabs li:first").addClass("active").show(); //Activate first tab 
     jQuery(".tab-content:first").show(); //Show first tab content 
    } 

    //On Click Event 
    jQuery("#tabs ul.nav li").click(function() { 
     jQuery("ul").find('li').removeClass('open'); 
     jQuery("ul.nav li").removeClass("active"); //Remove any "active" class 
     jQuery(this).addClass("active"); //Add "active" class to selected tab 
     var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
     if (activeTab.substr(0,1)=="#" && activeTab.substr(1)!="") { //Determine if a tab or link 
      jQuery(".tab-content").hide(); //Hide all tab content 
      jQuery(activeTab).fadeIn(); //Fade in the active content 
      return false; 
     } else { 
      return true; // If link allow redirect 
     } 
    }); 

});

Нажмите Войти, чтобы увидеть живой пример меню: https://whmcsdesigns.com/demo/clientarea.php?action=domains

источник

2013-09-26 Lucas Bustamante

Если вы загружаете страницу и вводите следующее, в con вы увидите, что он работает так, как вы ожидаете:

jQuery(".navbar .toggle.active > .nav-link").addClass('open'); 
jQuery(".navbar .toggle.active > ul").css('display', 'block');

Однако вы можете столкнуться с некоторыми проблемами с этим сроком. Это не лучшая практика, чтобы обернуть его в jQuery(window).on, однако это будет получить работу:

jQuery(window).on('load', null, {}, function() { 
    jQuery(".navbar .toggle.active > .nav-link").addClass('open'); 
    jQuery(".navbar .toggle.active > ul").css('display', 'block'); 
});

Обычно, он должен работать синхронно, но ради получения его на работу, используя window.onload будет работать этот код когда все закончится, загрузка, где мы можем безопасно предположим, что ваше меню будет готово к принятию этого кода. Так что это может произойти намного позже (мы говорим миллисекунды), после того, как меню изначально настроено и готово для этого кода.

источник

2013-09-26 06:16:14 Shea

Это отлично работает Shea! Благодаря!!! –

Добро пожаловать :) – Shea

использования event.preventDefault()

// Handle clicking on the naviagtion dropdown items 
     jQuery('.navbar .toggle > a').click(function(e) { 
    e.preventDefault(); 
     if (!jQuery(this).next().is(":visible")) { 
      jQuery('.toggle a').removeClass('open'); 
      jQuery('.toggle ul:visible').hide(); 
     } 
     jQuery(this).toggleClass('open'); 
     jQuery(this).next().slideToggle(); 
     });

эталонным event.preventDefault()

источник

2013-09-26 04:19:57

Спасибо за попытку, к сожалению не помогло –

e.preventDefault(); и используйте e.stopPropagation(); также –

Нравится? "Event.preventDefault(); event.stopPropagation();" Все еще нет:/ –

в CSS вы можете показать/скрыть DIV, когда пункт меню active

источник

2013-09-26 04:59:29 kkiran

Добавить класс в активное меню при щелчке

ответ

Смежные вопросы