Question

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

单击图像

时没有任何反应

Answer 1

我首先会使用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

Answer 2

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

<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是[{1}}的父级p的兄弟姐妹。img

幻灯片切换jquery - 在单击或悬停图像时显示一个段落

2 个答案: