クリックしてjQueryを無効にするホバーを無効にする

Question

jQueryコードがあります。これは、特定のポイントまで動作すると期待しています。 Hereはフィドルです

3つのメニュー項目を上に移動すると、黒い四角と追加の情​​報が黄色のボックスに表示されます。 メニュー1 & 3をクリックすると、メニューの前に緑色の円が表示されます。 メニュー2をクリックすると、検索バーも表示され、やや遅れてフォーカスが得られます。

これまではすべて問題ありません。

は、私は、例えば、欲しい：

-when「menu_item'_2がクリックされると私は黄色の分野では、別の項目の上にマウスを離れて移動 『info_2』示されなければなりません。

クリックが完了した後、何とかホバーをドロップする必要があります。 そして別のmenu_itemをクリックすると、黄色のボックスに対応する情報が表示されます。

私はjQueryの専門家ではないので、コードは別の方法で行う必要があります。

とにかく、ありがとうございます！

$(function() { 

$("#search").hover( 
    function() { 
     $("#search_info").show(); 
     $("#arrow").show().css('top', 230); 
     $("#fade_search").animate({ opacity: 0.4},50); 
    }, 
    function() { 
     $("#arrow, #search_info").hide(); 
     $("#fade_search").animate({ opacity: 1},50);  
    }).click(function(e) { 
      $("#activated").show().css('top', 232); 
      var focusDelay = $("input[type=text]").fadeIn(100);    
       setTimeout(function(){ 
        $(focusDelay).focus(); 
       },1000); 
      e.preventDefault(); 
      }); 

$("#list").hover( 
    function() { 
     $("#list_info").show(); 
     $("#arrow").show().css('top', 205); 
     $("#fade_list").animate({ opacity: 0.4},50); 
    }, 
    function() { 
     $("#arrow, #list_info").hide(); 
     $("#fade_list").animate({ opacity: 1},50); 

    }).click(function(e) { show up 
      $("#activated").show().css('top', 209); 
      e.preventDefault(); 
      }); 

$("#program").hover( 
    function() { 
      $("#program_info").show(); 
      $("#arrow").show().css('top', 255); 
      $("#fade_program").animate({ opacity: 0.4},50); 
     }, 
    function() { 
      $("#arrow, #program_info").hide(); 
      $("#fade_program").animate({ opacity: 1},50); 

    }).click(function(e) { 
      $("#activated").show().css('top', 261); 
      e.preventDefault(); 
      }); 
}); 

Answer 1

のようなものを。リワークのために、このjsFiddleを参照してください。http://jsfiddle.net/jUHNF/8/

注：私はあなただけのメニュー項目2の検索ボックスを表示したいと仮定、それはケースでなければ、単に以下の手順で取り外します。

else { 
     $("input[type=text]").hide(); 
    } 

コード自体かなりよくコメントされているはずです（あまりにもうまくいくかもしれません）。

ご覧のとおり、クリックしたメニュー項目に応じて別のイベントにするのではなく、すべての機能を1つのホバー/クリックイベントに移動しました。ここでのアイデアは、それを清潔でシンプルに保つことです。

あなたのメニューをクリックすると、さらに変更を加えたい場合（たとえば、現在クリックされたアイテムイタリックを作る）何？その後、各メニューイベントごとに3回、変更を加える必要があります。新しいメニュー項目を追加すると、もう一度コードを複製する必要があります。あなたのロジックの大部分が同じイベントになることを確実にすることで、このようなコードを複製する必要はありません。

編集：今後の参考にjsFiddleコードを貼り付けてください。

<div id="container"> 
     <div id="modes"> 
      <div class="elements" id="list"> 
       <a href="">menu_item_1</a> 
      </div> 
      <div class="elements" id="search"> 
       <a class="link" href="">menu_item_2</a> 
      </div> 
      <div class="elements" id="program"> 
       <a href="">menu_item_3</a> 
      </div> 
     </div> 
     <div id="infobox"> 
      <p id="list_info" class="infobox"> 
       info_1 
      </p> 
      <p id="search_info"class="infobox"> 
       info_2 
      </p> 
      <p id="program_info"class="infobox"> 
       info_3 
      </p> 
     <form method="post" action=""></form> 
      <input type="text" name="search_field" 
      placeholder="type here" /> 
     </form> 
     </div> 
     <div id="arrow"></div> 
     <div id="activated"></div> 
    </div> 

JS：

$(function() { 
    $(".elements").mouseover(
     function() { 
      activateMenuItem($(this)); 
     } 
    ).click(function(e) { 
     var bulletTop = $(this).position().top + 207; 
     $("#activated").show().css("top", bulletTop); 

     //turn off the hover function for all menu items 
     $(".elements").off("hover"); 

     if($(this).attr("id") == "search") { 
      var focusDelay = $("input[type=text]").fadeIn(100);    
      setTimeout(function(){ 
       $(focusDelay).focus(); 
      },1000); 
     }else { 
      $("input[type=text]").hide(); 
     } 
     activateMenuItem($(this)); //do same as on hover 
     e.preventDefault(); 
    }); 

    function activateMenuItem(item) { 
      var arrowTop = item.position().top + 205; 
      var boxName = "#" + item.attr("id") + "_info";    
      $("#arrow").show().css("top", arrowTop); 
      $(".infobox").hide(); 
      $(boxName).show(); 
    } 
}); 

Answer 2

この試してみてください。

$(function() { 
    $("#search").hover(//hover over search triggers info and arrow to show up 
    function() { 
     $("#search_info").show(); 
     $("#arrow").show().css('top', 230); 
     $("#fade_search").animate({ 
      opacity: 0.4 
     }, 
     50); 
    }, 
    function() { 
     if (!$(this).hasClass('activated')) { 
      $("#arrow, #search_info").hide(); 
     } 
     $("#fade_search").animate({ 
      opacity: 1 
     }, 
     50); 
    }).click(function(e) { //click on search triggers search box and activated button to show up 
     $('.elements').removeClass('activated'); 
     $(this).addClass('activated'); 
     $("#activated").show().css('top', 232); 
     var focusDelay = $("input[type=text]").fadeIn(100); 
     setTimeout(function() { 
      $(focusDelay).focus(); 
     }, 
     1000); 
     e.preventDefault(); 
    }); 
    $("#list").hover(//hover over list triggers info and arrow to show up 
    function() { 
     $("#list_info").show(); 
     $("#arrow").show().css('top', 205); 
     $("#fade_list").animate({ 
      opacity: 0.4 
     }, 
     50); 
    }, 
    function() { 
     if (!$(this).hasClass('activated')) { 
      $("#arrow, #list_info").hide(); 
     } 
     $("#fade_list").animate({ 
      opacity: 1 
     }, 
     50); 
    }).click(function(e) { //click on list triggers search box and activated button to show up 
     $('.elements').removeClass('activated'); 
     $(this).addClass('activated'); 
     $("#activated").show().css('top', 209); 
     e.preventDefault(); 
    }); 
    $("#program").hover(//hover over program triggers info and arrow to show up 
    function() { 
     $("#program_info").show(); 
     $("#arrow").show().css('top', 255); 
     $("#fade_program").animate({ 
      opacity: 0.4 
     }, 
     50); 
    }, 
    function() { 
     if (!$(this).hasClass('activated')) { 
      $("#arrow, #program_info").hide(); 
     } 
     $("#fade_program").animate({ 
      opacity: 1 
     }, 
     50); 
    }).click(function(e) { 
     $('.elements').removeClass('activated'); 
     $(this).addClass('activated'); 
     $("#activated").show().css('top', 261); 
     e.preventDefault(); 
    }); 
}); 
$('.elements').click(function(e) { 
    if ($(this).hasClass('activated')) { 
     var i = $(e.currentTarget).index(); 
     $('#infobox p').hide(); 
     $('#arrow, #infobox p:eq(' + i + ')').show(); 
    } 
}); 

JSFIDDLE

Answer 3

私はあなたの全体のjQueryのコードを変更したhttp://jsfiddle.net/workdreamer/TqxyY/