[英]slide toggle jquery - show a paragraph when clicking or hovering an image
正确,我正在尝试使用jQuery在人行或悬停或单击段落顶部的图像时显示段落,这是到目前为止的内容:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"type="text/javascript"></script>
<script>
jQuery.noConflict;
jQuery(document).ready(function(){
//Hide the tooglebox when page load
jQuery(".toggle").hide();
//slide up and down when hover over img
jQuery("img").click(function(){
// slide toggle effect set to slow you can set it to fast too.
jQuery(this).next(".toggle").slideToggle("slow");
return true;
});
});
</script>
<p>Welcome!</p>
<h2>Choose your category</h2>
<div id="front-page">
<div id="front-page-row">
<div id="front-page-cell">
<p><img src="images/running.png" alt="Running" class="category"/></p>
<p class="toggle">List of events<br/>bldasfblda<br/>bdwfbwef</p>
</div>
<div id="front-page-cell">
<p><img src="images/mtb.png" alt="MountainBike" class="category"/></p>
<p class="toggle">List of events<br/>bldasfblda<br/>bdwfbwef</p>
</div>
<div id="front-page-cell">
<p><img src="images/music.png" alt="Music" class="category"/></p>
<p class="toggle">List of events<br/>bldasfblda<br/>bdwfbwef</p>
</div>
</div>
</div>
单击图像没有任何反应
我将首先使用CSS隐藏.toggle
元素,以便立即使它们不可见。 其次,我将避免一遍又一遍地使用#front-page-cell
作为ID,而应将其转换为类名,并将其用作CSS选择器。
<style>
.toggle { display: none }
</style>
<script>
jQuery.noConflict();
jQuery(function($){
$(".front-page-cell").on("click", "img.category", function(){
$(this).closest(".front-page-cell").find(".toggle").toggle("slow");
});
});
</script>
我认为您的代码部分应该如下所示:
<script>
jQuery.noConflict;
jQuery(document).ready(function(){
//Hide the tooglebox when page load
jQuery(".toggle").hide();
//slide up and down when hover over img
jQuery("img").click(function(){
// slide toggle effect set to slow you can set it to fast too.
jQuery(this).parent().next(".toggle").slideToggle("slow");
return true;
});
});
</script>
因为next(selecetor)
正在寻找同级。 .toggle
是img
父级的p
兄弟
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.