如何使div在jQuery滑动菜单上可点击

Question

I have a sliding div menu made with jQuery, but you have to click on the LINK within the Div in order to make it slide. Can anyone tell me how to make the div ITSELF clickable?

You can see the menu and code here: http://jsfiddle.net/WhfDc/

I've tried to use CSS to make the anchor cover the entire div and it works sometimes. Any idea whether this is correct or not?

Answer 1

Yes, it is possible by attaching click event handler on the div instead of anchor element which is inside the div.

Also I would suggest you to use jQuery to attach event handler instead of inline event handler.

Working demo - http://jsfiddle.net/WhfDc/1/

Answer 2

You don't need all that Javascript. You can just bind the menu click event (for all divs with .evtog classes), the handler hides the submenus that are visibles and shows the submenu.

Try this:

$(function() {
  $("div.evtog").click(function() {
    $("div[name=events]:visible").slideUp(600);
    $(this).next().slideDown(200);
  })
});​

Note the $() wrapping the function, this is needed because in order to bind the elements they must be on DOM. And this guarantees that the function will be executed when the DOM is ready.

Working example: JsFiddle

More info:

.click
:visible
.next
.ready