jQuery的懸停和點擊擴展菜單

客戶端已內置在Magento站點，並有JavaScript代碼控制如何菜單顯示此位：jQuery的懸停和點擊擴展菜單

<script type="text/javascript"> 

jQuery('.nav-add li.level0, .nav li').hover(
function(){ 
    jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){ 

    }); 
}, 
function(){ 
    jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){ 
     jQuery(this).removeClass('inSlide'); 
    }); 
} 
) 
jQuery('.nav-widget').hide(); 

</script>

現在它的設置，只要用戶將鼠標懸停在擴大一個項目，但試圖以這種方式導航是相當煩人的。是否可以修改此代碼，以便在用戶點擊某個項目時展開？

我試着用.click或.mouseup代替.hover無濟於事。

來源

2012-02-01 miles

你想要點擊什麼行爲？ – ShankarSangoli 2012-02-01 22:08:13

假設你只是想通過click而不是hover切換懸停行爲，你可以嘗試這樣的事情。

jQuery('.nav-add li.level0, .nav li').click(function(){ 
    if(!$(this).data('clicked')){ 
     jQuery(this) 
     .data('clicked', true) 
     .children('.nav-widget:not(.inSlide), ul:not(.inSlide)') 
     .addClass('inSlide') 
     .slideToggle(700,function(){ 

     }); 
    } 
    else{ 
     jQuery(this) 
     .data('clicked', false) 
     .children('.nav-widget, ul:not(.active)') 
     .delay('2000') 
     .slideUp(500,function(){ 
      jQuery(this).removeClass('inSlide'); 
     }); 
    } 
}); 
jQuery('.nav-widget').hide();

來源

2012-02-01 22:11:41 ShankarSangoli

這並不奏效，但我認爲這是因爲Magento中的菜單是根據您的產品類別動態生成的，當您單擊主菜單項時導航到產品類別頁面，而不是展開子菜單。爲了實現這個目標，我必須找到一種方法來使主類別項目不可點擊。這可能就是爲什麼我沒有看到其他人擁有真正的手風琴/可展開式菜單的原因。 – miles 2012-02-01 22:38:46

的原因，它不通過簡單地用。點擊替換.hover（）工作（）是因爲懸停事件需要兩個功能，一個是onHover選項之一offhover。 .click（）事件只需要一個函數。我假設你需要頂層函數作爲你的點擊事件。

jQuery('.nav-add li.level0, .nav li').click(
    function(){ 
     jQuery(this).children('.nav-widget:not(.inSlide), 
     ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){ 
    }); 
}

來源

2012-02-01 22:14:55

jQuery的懸停和點擊擴展菜單

回答

相關問題