Question

I have footer menu in drupal which contains so many menu items.

<ul class="menu">
<li class="expanded first business">
<a title="" href="/content/business-tab">Business</a>
<ul class="menu">
<li class="leaf first about_business_mobile">
<a title="" href="/content/about-business-mobile">About Business Mobile</a>
</li>
<li class="leaf business_mobile_solutions">
<a title="" href="/content/business-pay-monthly">Business Mobile Solutions</a>
</li>
<li class="leaf value_packs">
<a title="" href="/content/business-value-packs">Value Packs</a>
</li>
<li class="leaf mobile_broadband">
<a title="" href="/content/mobile-broadband">Mobile Broadband</a>
</li>
<li class="leaf handsets">
<a title="" href="/content/handsets">Handsets</a>
</li>
<li class="leaf overseas_roaming">
<a title="" href="/content/overseas-roaming">Overseas Roaming</a>
</li>
<li class="leaf last overseas_calling_rates">
<a title="" href="/content/overseas-calling-rates">Overseas Calling Rates</a>
</li>
</ul>
</li>
<li class="expanded personal">
<a title="" href="/content/personal">Personal</a>
<ul class="menu">
<li class="leaf first about_personal_mobile">
<a title="" href="/content/personal-prepay">About Personal Mobile</a>
</li>
<li class="leaf personal_mobile_solutions">
<a title="" href="/content/personal-prepay">Personal Mobile Solutions</a>
</li>
<li class="leaf value_packs">
<a title="" href="/content/additional-packs-0">Value Packs</a>
</li>
<li class="leaf mobile_broadband">
<a title="" href="/content/mobile-broadband">Mobile Broadband</a>
</li>
<li class="leaf handsets">
<a title="" href="/content/handsets">Handsets</a>
</li>
<li class="leaf overseas_roaming">
<a title="" href="/content/overseas-roaming">Overseas Roaming</a>
</li>
<li class="leaf last overseas_calling_rates">
<a title="" href="/content/overseas-calling-rates">Overseas Calling Rates</a>
</li>
</ul>
</li>
</ul>

This is just the first li of the menu. What I want is, when I click on Business menu nothing will happen. So for this I used Jquery preventDefault function.

$('#footer li.expanded a:first-child').click(function(e) {
        e.preventDefault;
    });

But when I execute the script it just stops working of every links under the expanded menu.

Answer 1

This should do it:

$('#footer li.expanded a').click(function(e) {
    if(!$(this).parent().hasClass('leaf')){
        e.preventDefault();
    }
});