1

Jquery マウス入力および HTML ページの div へのトグル効果のイベントを残す

コードは次のとおりです

htmlコード

<div class="platform_solutions map_link" id="microsoft_link">

      <h3>Heading One</h3>
     </div>
     <div class="testing map_link" id="opensource_link" >

       <h3>Heading Two</h3>
     </div>

     <div class="branding_services map_link" id="verification_link">

      <h3>Heading Three</h3>
     </div>
     <div class="corporate_profile map_link" id="branding_link">

       <h3>Heading Four</h3>
</div>




<div id="microsoft_link1" style="display:none; padding-bottom:20px; float:left;" class="map_data">
<h4>Heading one</h4>
<p>  Test data</p>
</div>
<div id="opensource_link1" style="display:none; padding-bottom:20px; float:left;" class="map_data">
<h4>Heading Two</h4>
<p> Test data two</p>
</div>
<div id="verification_link1" style="display:none; padding-bottom:20px; float:left;" class="map_data">
<h4>Heading Three</h4>
 <p> Test data xussfsf</p>
</div>
<div id="branding_link1" style="display:none; padding-bottom:20px; float:left;" class="map_data">
<h4>Test Heading</h4>
<p> Test data sfs </p>
</div>

Jクエリコード

$(document).ready(function(){

$(function() {


 $('.map_link').mouseenter(function(){
      event.preventDefault();

    var currentId = $(this).attr('id');
    $("#"+currentId+"1").slideToggle(); 
     $("#"+currentId+"1").css('display','block');
  }).mouseleave(function(){
       event.preventDefault();
   var currentId1 = $(this).attr('id');
    $("#"+currentId1+"1").slideToggle(); 


  });



});




});​

コードは正常に動作しています。しかし、マウスをある見出しから別の見出しにすばやく移動すると. バウンス効果を生み出しています

4

1 に答える 1

1

これを試してください：ワーキングデモ http://jsfiddle.net/XXTgW/ または http://jsfiddle.net/XXTgW/1/

3 つの注意事項 :

  • イベントを使用するには、それを渡しますfunciton(event)
  • http://api.jquery.com/stop/
  • hidedata_mapに を追加しました

それが原因に適合することを願っています:)

コード

$(function() {


    $('.map_link').hover(function(event) {
        $('.map_data').hide();       
        var currentId = $(this).attr('id');
        $("#" + currentId + "1").stop(true, true).slideToggle();
    }, function(event) {
        $('.map_data').hide();
        var currentId1 = $(this).attr('id');
        $("#" + currentId1 + "1").stop(true, true).slideToggle();

    });


});​
于 2012-11-30T05:41:35.737 に答える