Question

我正在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正在阻止链接工作，但我不确定如何让它在第一次点击时提供活动类，然后在下拉可见时允许链接。它适用于悬停，但随后无法在触摸设备上工作。任何帮助/建议将不胜感激，谢谢。

Answer 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");
    }   
};

Answer 2

感谢您的回复，我正在沿着同样的思路前进，并以简单的方式结束，＆＃34;如果课程处于活动状态，则会阻止默认＆＃34;类型声明。

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");}
    }
};

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

2 个答案: