Javascript - 懸停時的Bootstrap下拉菜單打開子菜單的所有菜單級別

我已經有javascript功能，與只有一個下拉菜單的下拉列表項目效果很好，但當我有兩個下拉列表項或菜單子菜單水平，因爲懸停它打開子菜單的所有菜單的水平...網站是活的，一起來看看 - http://mile.x3.rs/mile/uram/Javascript - 懸停時的Bootstrap下拉菜單打開子菜單的所有菜單級別

的JavaScript一個下拉菜單級工作正常

// MENU HOVER 
 
$(document).ready(function() { 
 
    $(".dropdown, .dropdown-active").hover(function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
 
    }, function() { 
 
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
 
    }); 
 
});

<li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Partneri">Partneri <i class="fa fa-angle-down"></i></a> 
 
    <ul class="dropdown-menu" role="menu"> 
 
    <li><a href="#" title="Partner 1">Partner 1</a> 
 
    </li> 
 
    <li><a href="#" title="Partner 2">Partner 2</a> 
 
    </li> 
 
    <li><a href="#" title="Partner 3">Partner 3</a> 
 
    </li> 
 
    <li><a href="#" title="Partner 4">Partner 4</a> 
 
    </li> 
 
    <li><a href="#" title="Partner 5">Partner 5</a> 
 
    </li> 
 
    <li><a href="#" title="Partner 6">Partner 6</a> 
 
    </li> 
 
    </ul> 
 
</li>

但這

<li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Reference">Reference <i class="fa fa-angle-down"></i></a> 
 
    <ul class="dropdown-menu"> 
 
    <li class="dropdown dropdown-submenu"> 
 
     <a href="#" title="Prehrambena industrija">Prehrambena industrija</a> 
 
     <ul class="dropdown-menu"> 
 
     <li class="dropdown dropdown-submenu"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Pivare">Pivare<i class="fa fa-angle-right"></i></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Option 1</a> 
 
      </li> 
 
      <li><a href="#">Option 2</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</li>

來源

2016-05-12 Mile Mijatovic

如果要打開所有子水平或只顧眼前的孩子懸停元素請澄清。如上所述，您所需的功能尚不清楚。 –

如果我有前。參考資料 - >食品工業 - >啤酒廠 - >喜力工廠，懸停在參考資料我想打開下面的食品工業，然後當鼠標懸停在食品工業，在右邊開啤酒廠等 –

關於時間的注意事項，我覺得500值在淡入淡出，使菜單感覺有點呆滯。 –

您只需編輯您的jQuery代碼是這樣的。

$(document).ready(function() { 
    $(".dropdown, .dropdown-active").hover(function() { 
     $(this).find('.dropdown-menu').eq(0).stop(true, true).delay(200).fadeIn(500); 
    }, function() { 
     $(this).find('.dropdown-menu').eq(0).stop(true, true).delay(200).fadeOut(500); 
    }); 
});

因此腳本只會在第一個元素上運行。 https://jsfiddle.net/IA7medd/63Lfgjnm/

來源

2016-05-12 15:13:35

感謝:)工作像一個魅力 –

現在我注意到，有一個問題，當我嘗試打開移動和平板設備屏幕下拉菜單，當我的導航欄是崩潰了。當我點擊任何有下拉菜單和下拉菜單的列表項時，下拉菜單不會打開。怎麼修？ –

它不適用於觸摸設備，因爲在這些設備上，點擊事件被視爲懸停，因此當您第二次點擊時，請考慮您將鼠標懸停在列表上，以便淡出子菜單。爲了解決這個問題，我們將首先檢測到設備，然後我製作了另一個只能在觸控設備上運行的腳本。你會在這裏找到它：https：// jsfiddle。net/IA7medd/63Lfgjnm/3 /但我不測試它，所以請嘗試它，並告訴我，如果您有任何問題 –

你需要使用jQuery的find()選擇只有直系後裔元素的。

試試這個，注意$(this).find('> .dropdown-menu')：

$(document).ready(function() { 
    $(".dropdown, .dropdown-active").hover(function() { 
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
    }, function() { 
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
    }); 
});

以下是完整的演示：

$(document).ready(function() { 
 
    $(".dropdown, .dropdown-active").hover(function() { 
 
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
 
    }, function() { 
 
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
 
    }); 
 
});

<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.js"></script> 
 
<script src="//cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <header> 
 
    <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Reference">Reference <i class="fa fa-angle-down"></i></a> 
 
     <ul class="dropdown-menu"> 
 
     <li class="dropdown dropdown-submenu"> 
 
      <a href="#" title="Prehrambena industrija">Prehrambena industrija</a> 
 
      <ul class="dropdown-menu"> 
 
      <li class="dropdown dropdown-submenu"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Pivare">Pivare<i class="fa fa-angle-right"></i></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Option 1</a> 
 
       </li> 
 
       <li><a href="#">Option 2</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </header> 
 
</div>

來源

2016-05-12 15:05:14

您正在使用遍歷菜單的所有後代的.find。你只需要你的評論「下一級」，所以你應該使用.children，因爲它不會遍歷到下一個級別。

$(document).ready(function() { 
    $(".dropdown, .dropdown-active").hover(function() { 
    $(this).children('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); 
    }, function() { 
    $(this).children('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); 
    }); 
});

參考：https://api.jquery.com/children/

來源

2016-05-12 15:36:35

Javascript - 懸停時的Bootstrap下拉菜單打開子菜單的所有菜單級別

回答

相關問題