[jQuery] collapsible list
Hi
I'm using the function below to collapse an unordered list which all
seems to workfine, but what I want is the lower level items in the the
list to be hyper links (again I can get to display) but when I click
on the link nothing happens. It seems to be the Jquery function
stopping this but as I'm fairly new to Jquery and not sure why.
Jquery function
<script type="text/javascript">
$(function() {
$('li:has(ul)')
.click(function(event) {
if (this == event.target) {
if ($(this).children().is(':hidden')) {
$(this)
.css('list-style-image', 'url(../images/design/minus.gif)')
.children().show();
} else {
$(this)
.css('list-style-image', 'url(../images/design/plus.gif)')
.children().hide();
}
} return false;
})
.css('cursor', 'pointer')
.click();
$('li:not(:has(ul))').css({
cursor: 'default', 'list-style-image': 'none'
});
});
</script>
unorderlist
<ul>
<li>heading
<ul>
<li><a href="http://www.hyperlink">text</a></li>
<li><a href="http://www.hyperlink">text</a></li>
<li><a href="http://www.hyperlink">text</a></li>
</ul>
</li>
<li>heading
<ul>
<li><a href="http://www.hyperlink">text</a></li>
<li><a href="http://www.hyperlink">text</a></li>
<li><a href="http://www.hyperlink">text</a></li>
</ul>
</li>
</ul>