Jquery: to set the <a> link to return true again

JavaScript
1

Hi,
I have menu which nested with sub menu like this,

<div id="menu">
 <ul>
 <li><a href="#">menu1</a>
   <ul>
      <li>sub1</li>
      <li>sub2</li>
   </ul>
</li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>

and I just want the last item in the menu to return true when it is clicked. So my idea is to set all item to return false, then set the last item to return true again.

$('#menu > ul > li > a').click(function(){
				return false;
			});
			
$('#menu > ul > li > a:last').bind('click', function() {
			  return true;
			});

but I think probably it is wrong bcos it wont work! many thanks if u have any ideas to do this.

cheers,
Lau

2

It’s not the last <a> tag you should be looking for, but the last <li> tag, since there is only one <a> per <li> but there are multiple <li>'s.

So you should do


$('#menu > ul > li > a').click(function(){
				return false;
			});
			
$('#menu > ul > li:last > a').bind('click', function() {
			  return true;
			});

Or, more simple:


$('#menu > ul > li:not(:last) > a').click(function(){
				return false;
			});

(not tested)

3

just tested it and it works great! thanks :smiley:

thank you for correcting this :slight_smile: