单击时将类添加到活动菜单答案

【问题标题】：Add class to active menu on click单击时将类添加到活动菜单
【发布时间】：2013-09-26 03:46:46
【问题描述】：

当我单击父菜单（如域）时，它显示它是子菜单，当我单击其中一个（如我的域）时，页面重新加载，父菜单关闭（未展开，如下图所示）

这些类对于菜单活动（蓝色背景）是“活动的”，对于可见的子类是“打开的”

这些是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

【问题讨论】：

标签： javascript jquery drop-down-menu

【解决方案1】：

如果您加载页面并在控制台中输入以下内容，您将看到它按预期工作：

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 将在所有内容加载完成后运行此代码，我们可以安全地假设您的菜单将准备好接受此代码。所以这可能会在菜单初始设置并准备好此代码之后运行很久（我们说的是毫秒）。

【讨论】：

【解决方案2】：

使用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()

【讨论】：

e.preventDefault();并使用 e.stopPropagation();也
喜欢这个？ “event.preventDefault();event.stopPropagation();”还是不行：/
我上周开始学习javascript，所以我不确定。上面有一个实时版本菜单的链接，也许你想看看？
它在一个单独的 javascript 文件中被调用 - 你想要它完整吗？
让我们continue this discussion in chat

【解决方案3】：

在 CSS 中，您可以在菜单项处于活动状态时显示/隐藏 div

【讨论】：