Javascript 滑动切换jquery-单击或悬停图像时显示段落

对， 我试图使用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>

jQuery.noConflict；
jQuery（文档）.ready（函数（）{
//页面加载时隐藏tooglebox
jQuery（“.toggle”）.hide（）；
//悬停在img上时上下滑动
jQuery（“img”）。单击（函数（）{
//滑动切换效果设置为“慢”，您也可以将其设置为“快”。
jQuery（this.next（“.toggle”）.slideToggle（“slow”）；
返回true；
});
});
欢迎光临

选择你的类别

事件列表


事件列表


事件列表

---

当我单击图像时，什么也没有发生，我认为您的代码部分应该如下所示：

<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>

jQuery.noConflict；
jQuery（文档）.ready（函数（）{
//页面加载时隐藏tooglebox
jQuery（“.toggle”）.hide（）；
//悬停在img上时上下滑动
jQuery（“img”）。单击（函数（）{
//滑动切换效果设置为“慢”，您也可以将其设置为“快”。
jQuery（this）.parent（）.next（.toggle”）.slideToggle（“slow”）；
返回true；
});
});

---

因为

next（selector）

正在寻找兄弟姐妹。而

.toggle

是

p

的兄弟

img

的父元素，我会先用CSS隐藏

.toggle

元素，所以它们会立即被隐藏。其次，我将避免反复使用

#首页单元格

作为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>

.toggle{显示：无}
jQuery.noConflict（）；
jQuery（函数（$）{
$（“.FrontPage单元格”）。在（“单击”“img.category”，函数（）上{
$（this）.closest（“.front page cell”）.find（.toggle”）.toggle（.slow”）；
});
});

---

演示：

只是一个小观察，您应该在

noConflict

之后添加

（）

，如

jQuery.noConflict（）

或者它可能无法正常工作，可能会破坏您的代码。检查您的控制台在该行是否没有返回任何错误。另一个观察结果是，不要反复使用相同的id值。您有多个元素，全部称为“首页单元格”-如果您想重复使用这样的值，请使用

class

。如何使一个p在另一个p打开时隐藏，即一次只显示一个？@bamwebdesign。尝试

$（'.toggle:visible'）

@bamwebdesign。不间断电源。。。很抱歉隐藏状态？尝试此

$（'.toggle'）。不（':visible'）

或

$（'.toggle:hidden'）

。或者你能更详细地阐述你的问题吗？？