Anchor doesn't function in collapsible list

Question

Below is my Jquery code for the collapsible list.

<script type="text/javascript">
$(function(){
    $('li')
        .css('pointer','default')
        .css('list-style-image','none');
    $('li:has(ul)')
        .click(function(event){
            if (this == event.target) {
                $(this).css('list-style-image',
                    (!$(this).children().is(':hidden')) ? 'url(plusbox.gif)' : 'url(minusbox.gif)');
                $(this).children().toggle('slow');
            }
            return false;
        })
        .css({cursor:'pointer', 'list-style-image':'url(plusbox.gif)'})
        .children().hide();
    $('li:not(:has(ul))').css({cursor:'default', 'list-style-image':'none'});
});

Below is an example of a list element

<legend>Collapsable List Demo</legend>
    <ul >
      <li>INTRODUCTION
        <ul>
          <li><a href = "index.html">How To Use These Guidelines</a></li>
          <li>Revision History</li>
        </ul>
      </li>
    </ul>

Fiddle

The list works perfectly, however anytime I add a href to the element it is not clickable. However if I right click and select "open in a new tab" it works. So I know all of the HTML is correct. The Jquery code is restricting the redirect.

Answer 1

Seems like removing return false resolves the issue with no side effects.

if (this == event.target) {
    $(this).css('list-style-image', (!$(this).children().is(':hidden')) ? 'url(plusbox.gif)' : 'url(minusbox.gif)');
    $(this).children().toggle('slow');
}
// return false;

Demo