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-cellIDとして何度も使用することを避け、代わりにクラス名に変換して、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兄弟ですpimg

于 2012-05-14T03:10:40.800 に答える