改變懸停點擊標題導航彈出菜單

Question

• 鑑於：一個簡單的標題與導航元素。
• 當：用戶將鼠標懸停在標題導航元素和迷你彈出窗口出現
• 然後：用戶必須點擊的元素顯示在彈出

下面的代碼爲懸停的偉大工程，但我希望迷你彈出窗口在點擊時顯示，而不是懸停。當我改變.hover到.click什麼都沒有發生。

任何想法？

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()方法接受兩個參數，from the docs：

.hover(handlerIn, handlerOut) 

在另一方面.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。

希望它有幫助， 乾杯。

編輯：使用此解決方案勁歌了點擊的目標將是<span class="menu">Example</span>這就是爲什麼我用.parent()功能向上遍歷DOM來找到你打算綁定元素記住taht。