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

slide toggle show a paragraph when clicking or hovering an image

本文关键字：图像 显示 段落 悬停 单击      更新时间：2023-09-26

Right，我正在尝试使用 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>

演示：http://jsbin.com/evomay/edit#javascript,html

我认为您的代码部分应该如下所示：

<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是p父母的兄弟姐妹img

相关文章：