2010-09-17 68 views
1

我絕對試圖擺脫這個插件,我想要一些輕量級和簡單的東西。這就像我在上下文菜單上獲得的一樣。我可以點擊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'); } 
); 
}); 
+0

我試過插件,但他們添加了我不想要的額外標記,另外一些只是不完全按照我需要的方式來完成。 – stephenway 2010-09-17 22:43:34

回答

1

由於您將單擊事件附加到包含錨的列表項,這是預期的。您可以把一個專用的元素來處理切換事件,該事件移至第一錨內部列表項之外,或停止點擊事件的傳播上的錨 -

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

酷,像魅力一樣工作,我也改變了選擇不使用Shizzle。謝謝! – stephenway 2010-09-17 22:52:47