懸停時顯示/隱藏級聯菜單元素

當用戶在特定元素上移動鼠標時，需要顯示/隱藏級聯菜單。使用懸停功能，使用jquery很容易實現：
N.B：計時器僅用於在200ms後隱藏菜單，並不重要。懸停時顯示/隱藏級聯菜單元素

$(document).ready(function() { 
    var timer; 
    $('.element,.cascading_menu').hover(function(){ 
     clearTimeout(timer); 
     $('.cascading_menu').show(); 
    }, function(){ 
     timer = setTimeout(function(){$('.cascading_menu').hide();},200); 
    }); 
});

我必須爲每個我想隱藏的菜單重複此代碼。
但由於我有很多菜單，我想減少代碼長度。

我的想法是使用「id懸停的元素：id菜單來顯示/隱藏」的數組。
你認爲有可能編寫一個jQuery函數，給定這個元素數組，提供顯示每個菜單，而不必編寫代碼十幾次？

來源

2014-04-06 Andy Wall

你能提供一個小提琴嗎？ – Anubhav

你可以刪除'setTimeout'，而是使用'。延遲（200）'（我知道你說的那部分並不重要，但它可以節省幾行） – royhowie

非常感謝您的回答級聯無限深:-)。最後，我寫了這段代碼，它工作得很好。問題是顯示的元素不是元素的子元素，所以我創建了兩個數組，其中一個元素懸停，另一個元素顯示，並將所有元素與所有的函數組合在一起。這裏是代碼：

$(document).ready(function() { 

     var timer; 
     var h1=["prof","notif_cont","explo"]; 
     var h2=[".profile",".notification",".explore"]; 
     $('.hover').hover(
      function(){ 
       var hoverrato=$(this).children(':first'); 
       $.each(h1, function(indice,checker){ 
        if($(hoverrato).hasClass(checker)){ 
         var index_hov=indice; 
         ul_show=h2[index_hov]; 
         clearTimeout(timer); 
         $(ul_show).show(65); 
        } 
       }); 

      }, 
      function(){ 
       timer = setTimeout(function(){$(ul_show).hide(65);},200); 
      }); 

});

來源

2014-04-07 17:02:53

您可以使用this，以便您可以對所有元素使用相同的代碼，但這一切都取決於您的html代碼格式。

Here is an example.

$(document).ready(function() { 
    $('.element').hover(function(){ 
     $(this).find(".cascading_menu").stop().slideDown(); 
    }, function(){ 
     $(this).find(".cascading_menu").delay(200).slideUp(); 
    }); 
});

注：您還可以使用delay(ms)，而不是一個計時器。

來源

2014-04-06 21:32:29

我會設置它爲this，它將爲具有深度的菜單工作，假設每個<li class="hoverli">都帶有一個子菜單，該子菜單是一個無序列表（<ul class="file_menu">）。 pass a duration（即零）至.hide()或.delay()will not work很重要，因爲它沒有使用沒有設定持續時間的效果隊列。

HTML：

<div id="button"> 
    <ul class="hover"> 
     <li class="hoverli">Hover over me! 
      <ul class="file_menu"> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li>     
      </ul> 
     </li> 
     <li class="hoverli">or me! 
      <ul class="file_menu"> 
       <li class="hoverli">submenu! 
        <ul class="file_menu"> 
         <li>A</li> 
         <li>B</li> 
         <li>C</li> 
         <li>D</li> 
        </ul> 
       </li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li>     
      </ul> 
     </li> 
    </ul> 
</div>

的JavaScript：

$(".hoverli").hover(function(){ 
    $(this).find("ul").show(); 
}, function(){ 
    $(this).find("ul").delay(200).hide(0); 
});

CSS：

ul, li { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
.menu_class { 
    border:1px solid #1c1c1c; 
} 
.file_menu { 
    display:none; 
    width:300px; 
    border: 1px solid #1c1c1c; 
} 
.file_menu li { 
    background-color: white; 
}

來源

2014-04-06 21:50:58 royhowie

下面是一個很好的例子「Windows 7的」風格級聯菜單Fiddle

$(function(){ 
    $('.hasDropdown').hover(function(){ 
     $(this).find('ul:first').show(); 
    },function(){ 
     $(this).find('ul').hide(); 
    }) 

});

它會在理論上

來源

2014-04-06 21:52:58

懸停時顯示/隱藏級聯菜單元素

回答

相關問題