jQuery - Several functions on one element
Im currently developing a wordpress site for a client, and they want to have a scroller which disapears from the click of a button and then shows content in a modal window blah blah blah ... It seems to all work, except when i put it all together when i click on a li element, it just displays the link in the address bar and doesnt go anywhere ... i have a feeling its got to do with disabling the normal function of a href but i wasnt sure how to get around it.
So for the scroller i have the following structure
<div class="scrollerone">
<ul>
<li><a href=""><img src="image.jpg" /></a></li>
<li><a href=""><img src="image.jpg" /></a></li>
<li><a href=""><img src="image.jpg" /></a></li>
<li><a href=""><img src="image.jpg" /></a></li>
<li><a href=""><img src="image.jpg" />&开发者_如何学运维lt;/a></li>
<li><a href=""><img src="image.jpg" /></a></li>
<li><a href=""><img src="image.jpg" /></a></li>
</ul>
</div>
The jQuery code i have is as follows ....
<script type="text/javascript">
jQuery(function() {
jQuery(".scrollerone").jCarouselLite({
btnNext: "#btnnext1",
btnPrev: "#btnprev1"
});
});
</script>
<script type="text/javascript">
jQuery(function(){
var list = jQuery('.scrollerone');
var original_height = list.height();
var new_height = '0';
list.css({height:new_height});
jQuery('#refl').click(function() {
if(list.height() == original_height){
jQuery('.viewcs').html('VIEW ALL CASE STUDIES');
list.animate({height:new_height});
} else {
list.animate({height:original_height});
jQuery('.viewcs').html('CLOSE ALL CASE STUDIES');
}
return false;
});
});
</script>
If anyone could shed some light on this, that would be great ... I have a feeling that the return false bit disables the usual click behaviour, but it shouldnt affect the clicking on the li elements in the scroller should it?
Cheers,
$("a").click(function(event) {
event.preventDefault();
});
use event.preventDefault to stop the default event of the anchor..
精彩评论