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

我绝对试图摆脱这个插件，我想要一些轻量级和简单的东西。这就像我在上下文菜单上获得的一样。我可以点击li.dd a，它揭示了ul，当我再次点击它时，它隐藏了ul。它不让我做的是点击ul中的锚点。而不是链接到该锚点它隐藏菜单。任何我需要做不同的事情？简单的jQuery上下文菜单点击问题

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

来源

2010-09-17 stephenway

我试过插件，但他们添加了我不想要的额外标记，另外一些只是不完全按照我需要的方式来完成。 – stephenway 2010-09-17 22:43:34

由于您将单击事件附加到包含锚的列表项，这是预期的。您可以把一个专用的元素来处理切换事件，该事件移至第一锚内部列表项之外，或停止点击事件的传播上的锚 -

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

来源

2010-09-17 22:45:47

酷，像魅力一样工作，我也改变了选择不使用Shizzle。谢谢！ – stephenway 2010-09-17 22:52:47

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

回答

相关问题