ヘッダーナビゲーションフライアウトメニューのホバーをクリックするように変更する

Question

• Given：ナビゲーション要素を含む単純なヘッダー。
• た場合：ユーザーは、ヘッダーのnav要素の上に置くとミニフライアウトが続い
• 表示されます。ユーザーは、フライアウト

に以下のコードを表示する要素をクリックする必要がありますホバーのための素晴らしい作品が、私は、ミニフライアウトが、ホバーの代わりにクリックで表示されるようにしたいと思います。 .cloverに変更すると何も起こりません。

アイデア？オン

.hover(handlerIn, handlerOut) 

：

はJQuery

jQuery(document).ready(function() { 
function displayFlyout(main_id, content_id) { 
    jQuery(main_id).hover(function() { 
      jQuery(content_id).stop(true, true).slideDown('fast'); 
      jQuery(this).addClass("fly-dropdown"); 
     }, 
     function() { 
      jQuery(content_id).stop(true, true).slideUp(200); 
      jQuery(this).removeClass("fly-dropdown"); 
     } 
    ); 
} 

displayFlyout("#example_one", "#example_one_content"); 
displayFlyout("#example_two", "#example_two_content"); 
displayFlyout("#example_three", "#example_three_content"); 
}); 

のHTML（フライアウトのほんの一例）

<ul class="header_flyout col-md-10 pull-right"> 
     <li class="contact_us"> 
      <div id="example_one" class="no-dropdown"> 
       <span class="menu"><?php echo $this->__('Example'); ?></span> 
       <div class="header-dropdown-content" id="example_one_content"> 
        <span class="blue-arrow">&nbsp;</span> 
        <?php echo $this->getChildHtml('contact_mini'); ?> 
       </div> 
      </div> 
     </li> 
     <li>.....</li> (example two) 
     <li>.....</li> (example three) 
    </ul> 

Answer 1

問題は.hover()方法は、2つのパラメータ、from the docsを受け入れています他の手は.click()機能は受け入れるあなたは何ができるか一つのパラメータは、ドキュメント上のclickイベントに耳を傾け、それがターゲットに当たった場合は、ドロップダウンをアクティブにしたい、それ以外のドロップダウンを非表示にしますので、のようなものです：

jQuery(document).ready(function() { 
    function displayFlyout(main_id, content_id) { 
    jQuery(document).click(function (ev) {  
     if (jQuery(ev.target).parent(main_id).is(jQuery(main_id))) { 
     jQuery(content_id).stop(true, true).slideDown('fast'); 
     jQuery(this).addClass("fly-dropdown");  
     } else { 
     jQuery(content_id).stop(true, true).slideUp(200); 
     jQuery(this).removeClass("fly-dropdown"); 
     } 
    }); 
    } 

    displayFlyout("#example_one", "#example_one_content"); 
}); 

することができますまた、このjsFiddleに確認してください。

希望すると、 乾杯。

EDIT：は、クリックの目標は、私はあなたがバインドしようとして要素を見つけるために、DOMを横断する.parent()機能を使用する理由だ<span class="menu">Example</span>なることmeandこのソリューションを使用して、心のtahtしてください。