简单jquery上下文菜单单击问题

我绝对想避开插件,我想要一些轻量和简单的东西。这是我在上下文菜单中得到的。我可以点击 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'); }
  );
});