Here is my HTML:
<div class="accord">
<ul class="root static">
<li class="static">
<a class="static menu-item" href="http://google.com">
<span class="additional-background">
<span class="menu-item-text">Heading</span>
</span>
</a>
<ul class="static">
<li class="static">
<a class="static menu-item" href="http://msn.com">
<span class="additional-background">
<span class="menu-item-text">Item 1</span>
</span>
</a>
</li>
</ul>
</li>
.. items continue ..
The jQuery:
$(function() {
$('.accord .root .static ul.static').hide();
$('.ms-quickLaunch .root .static:has(ul.static)').each(function (i, elmnt) {
$(this).addClass('linksBelow');
});
$('.accord .linksBelow').click(function() {
$(this).find('ul.static').slideToggle('fast');
$(this).toggleClass('twirl');
});
});
What happens with the above is that when you click the <li>
Heading the accordion expands, however the Header contains a link <a class="static menu-item" href="http://google.com">
.
I'd like to change the above jQuery so that when I click the link in the header the accordion does no开发者_开发问答t expand, however when I click in any other area around the link I want the accordion to expand.
Some how I need to be able to tell wether the link was clicked, and if that link was clicked prevent the accordion from expanding.
Anyone have any ideas?
The link isnt set to display:block
so it does not occupy the full width of the header.
$('.accord .linksBelow').click(function(e) {
$(this).find('ul.static').slideToggle('fast');
$(this).toggleClass('twirl');
e.stopPropagation();
});
精彩评论