Question

我绝对试图避开这个插件，我想要一些轻量级和简单的东西。这是我在上下文菜单上得到的。我可以点击li.dd a，然后显示ul，当我再次点击它时，它会隐藏ul。它不允许我点击ul中的锚点。它不是链接到那个锚，而是隐藏菜单。我需要采取哪些不同的做法？

html:
  <ul class="tools">
    <li class="dd"><a href="#" class="bnt">Tools</a>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#" class="last">Item 3</a></li>
      </ul>
    </li>
  </ul>

SASS:
  .tools
    font-weight: bold
    margin: 12px 0 -12px !important
    text-align: right
    a.bnt
      border: #404041 1px solid
      color: #fff !important
      padding: 6px 15px
    ul
      background-color: #fff
      margin-top: 20px !important
      margin-left: 106px !important
      width: 210px
      a
        border-bottom: #cfcfcf 1px solid
        color: #666
        display: block
        font-weight: normal
        padding: 6px 20px
        text-align: left
        &:hover
          background-color: #000
          color: #fff
        &.last
          border-bottom: none

jQuery:
$(function() {
  $(".dd").toggle(
    function(){ 
      $("ul", this).fadeIn("fast");
      $(this).addClass('on');
          }, 
    function(){ $("ul", this).fadeOut("fast"); $(this).removeClass('on'); }
  );
});

Answer 1

由于您将click事件附加到包含锚点的列表项，因此可以预期。您可以放置一个专用元素来处理切换事件，将事件移动到内部列表项之外的第一个锚点，或者停止在锚点上传播点击事件 -

$('.dd li a').click(function(e) {
   e.stopPropagation();
});

简单的jQuery上下文菜单单击问题

1 个答案: