Simple jQuery Contextual Menu Click Problem

Question

I'm absolutely trying to steer clear of plugins for this, I want something lightweight and simple. This is as far as I have gotten on a contextual menu. I can click on the li.dd a and it reveals the ul, and when I click on it again it hides the ul. What it doesn't let me do is click on anchors in the ul. Instead of linking to that anchor it hides the menu. Anything I need to do differently?

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

I've tried plugins but they add extra markup that I don't want, plus some just don't do it exactly how I need it. — Stephen Way
– Stephen Way, Commented Sep 17, 2010 at 22:43

Eran Galperin · Accepted Answer · 2010-09-17 22:45:47Z

1

Since you attached the click event to the list item that contains the anchors, that's to be expected. You can either put a dedicated element to handle the toggle events, move the event to the first anchor outside of the inner list-items, or stop propagation of click events on the anchors -

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

answered Sep 17, 2010 at 22:45

Eran Galperin

86.9k24 gold badges119 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephen Way Over a year ago

Cool, worked like a charm, and I also changed the selector to not use Shizzle. Thanks!

Collectives™ on Stack Overflow

Simple jQuery Contextual Menu Click Problem

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related