0

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

单击图像时没有任何反应

4

2 回答 2

1

我会先.toggle用 CSS 隐藏元素，所以它们会立即变得不可见。其次，我会避免#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

于 2012-05-14T03:35:45.563 回答
0

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

<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

于 2012-05-14T03:10:40.800 回答