如何使顶级下拉项目可点击答案

【问题标题】：How to make a top level drop down item clickable如何使顶级下拉项目可点击
【发布时间】：2015-12-17 06:40:50
【问题描述】：

我正在 shopify 中创建商店，并将导航栏设置为下拉菜单。单击导航链接只会使其显示或隐藏下拉列表，但我需要的是它在第一次单击时显示，然后单击父级将跟随链接。（例如，我的主页项目下拉，但我实际上无法回家，需要它作为下拉项目。）

HeaderView.prototype.events = {
"click .main-nav .dropdown > a": "toggleMenu",
};


HeaderView.prototype.toggleMenu = function(e) {
  var dropdown;
  e.preventDefault();
  dropdown = this.$(e.target).closest(".dropdown");
  if (!this.$(e.target).closest(".dropdown-nav").length) {
    this.$(".dropdown").not(dropdown).removeClass("active");
    return dropdown.toggleClass("active");}   
};

显然 e.preventDefault 正在阻止链接工作，但我不确定如何让它在第一次点击时提供一个活动类，然后在下拉可见时允许链接被跟踪。它适用于悬停，但不适用于触摸设备。任何帮助/建议将不胜感激，谢谢。

【问题讨论】：

标签： javascript jquery navigation shopify dropdown

【解决方案1】：

您只需要在第一次点击时调用 e.preventDefault()。否则，就像你说的那样，它会阻止它工作。

试试这个：

HeaderView.prototype.toggleMenu = function(e) {
    var dropdown;
    dropdown = this.$(e.target).closest(".dropdown");
    if (!this.$(e.target).closest(".dropdown-nav").length) {
        e.preventDefault();
        this.$(".dropdown").not(dropdown).removeClass("active");
        return dropdown.toggleClass("active");
    }   
};

【讨论】：

【解决方案2】：

感谢您的回复，我也有同样的想法，最后得到了一个简单的“如果类处于活动状态，则阻止默认”类型声明。

if (!this.$(".dropdown").hasClass("active")){
e.preventDefault();

所以基本上，如果下拉显示，允许链接，如果没有显示，阻止它；因此，如果它的下拉菜单是“打开”，则将其保留为链接。

HeaderView.prototype.toggleMenu = function(e) {
  var dropdown;
  dropdown = this.$(e.target).closest(".dropdown");
    if (!this.$(".dropdown").hasClass("active")){
  e.preventDefault();
  if (!this.$(e.target).closest(".dropdown-nav").length) {
    this.$(".dropdown").not(dropdown).removeClass("active");
    return dropdown.toggleClass("active");}
    }
};

【讨论】：