Javascript 如何将此菜单的可单击区域限制为文本？

为什么整个宽度是可点击的，我怎样才能改变它

显然，唯一可点击的区域应该是可见的文本，而不是其他

我试过display:inline块，但它弄乱了菜单

谢谢

HTML

---

整个宽度是可单击的，因为li元素具有列表项显示，其行为指定其宽度为100%。这是误导性的，因为只有锚标记具有指针光标

我用以下内容更新了您的fiddle（）：

$('.menu-level-1 a').on('click', function() {
    var parent = $(this).parent();

    ...
});

---

现在，它将click listener绑定到锚定标记本身，而不是我认为您所期望的.menu-level-1内容和功能。

使用click event forli，而不是使用click event for锚定 在遍历中使用parent（）

Jquery：

$('.menu-level-2').hide();
$('.menu-level-1 > a').on('click', function(){      
  if(!($(this).parent().children('.menu-level-2').is(':visible'))){
      $('.menu-level-2').slideUp();
      $(this).parent().children('.menu-level-2').slideDown();
    } else {
    $('.menu-level-2').slideUp();
  }
});
$('.menu-level-2').on('click', function(e){
  e.stopPropagation();
});

---

下面是JSFIDLE:

只需更改CSS并使用display:table即可

ul li {
    position: relative;
    display: table;
}

---

在你的小提琴里，它似乎完全按照你想要的那样工作？您可以使用display:inline块，但随后必须添加float:left；明确：两者皆有；如果您希望列表项是垂直的而不是水平的！单击的目标不是文本，而是类。菜单级别1，该类的宽度大于文本的宽度。将鼠标悬停在菜单上，红色背景为文本宽度，绿色为类宽度，非常感谢。我现在明白了。您建议如何修复它？这样，单击第二列将关闭它。它不应该：（我更新了它！我将选择器从.menu-level-1A更改为.menu-level-1>a。我认为它现在可以按照您的要求工作。还有另一个解决方案……哇，太多了！我想我实际上更喜欢这个方案，因为它不会改变我的原始脚本。我可以问一下，您为什么要添加边距底部吗？没有必要，是吗？它是用于在您的小提琴中进行测试的，我已经删除了它。）。

$('.menu-level-2').hide();
$('.menu-level-1 > a').on('click', function(){      
  if(!($(this).parent().children('.menu-level-2').is(':visible'))){
      $('.menu-level-2').slideUp();
      $(this).parent().children('.menu-level-2').slideDown();
    } else {
    $('.menu-level-2').slideUp();
  }
});
$('.menu-level-2').on('click', function(e){
  e.stopPropagation();
});

ul li {
    position: relative;
    display: table;
}