[英]Bootstrap 4 navbar open dropdown when hover on big screen, but blick to open on small screen
我有一個導航欄，當我將鼠標懸停在下拉標題上時，我想打開下拉菜單，並通過使用以下jquery代碼完成了此操作：
$('body').on('mouseenter mouseleave', '.dropdown', function (e) {
var dropdown = $(e.target).closest('.dropdown');
var menu = $('.dropdown-menu', dropdown);
dropdown.addClass('show');
menu.addClass('show');
setTimeout(function () {
dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
}, 300);
});
而這個CSS：
.dropdown:hover>.dropdown-menu {
display: block;}
問題是，在小型設備上，當我單擊下拉標題時，下拉菜單將打開，但是當我再次單擊時，下拉菜單將不會關閉（在正常情況下，bootstrap 4切換器的工作方式）。 當我將鼠標懸停在大屏幕上的下拉標題上時，如何打開下拉菜單；當我在小屏幕上單擊下拉菜單標題時，如何打開下拉列表？
HTML：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo base_url('assets/css/bootswatch.css'); ?>"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="<?php echo base_url('assets/css/overwrite.css');?>" type="text/css"/>
<link rel="stylesheet" href="<?php echo base_url('assets/css/style.css');?>" type="text/css"/>
<script src="<?php echo base_url('assets/jquery/jquery.js');?>"></script>
</head>
<body>
<div class="top-text-container">
<div class="top-text">
<div class="top-text-left">Pentru Comenzi:
<i class="fas fa-phone fa-lg"></i>
<span id="top-number-phone">0746117702</span>
</div>
<div class="top-text-right"><a href="#" class="link">Login</a></div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed">
<a class="navbar-brand" href="#"><img class="logo-img" src="<?php echo base_url('assets/images/test2_logo.png');?>"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Acasa</a>
<span class="divider">|</span>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Meniu</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Pizza</a>
<a class="dropdown-item" href="#">Carne de pui</a>
<a class="dropdown-item" href="#">Carne de porc</a>
<a class="dropdown-item" href="#">Garnituri</a>
<a class="dropdown-item" href="#">Ciorbe</a>
<a class="dropdown-item" href="#">Salate</a>
</div>
<span class="divider">|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Meniul Zilei Weekend</a>
<span class="divider">|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Evenimente</a> <!--dropdown-->
<span class="divider">|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
<span class="divider">|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galerie</a>
<span class="divider">|</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item cart">
<a class="nav-link" href="#"><i class="fas fa-shopping-cart fa-lg"></i></a>
<div id="cart-count">3</div>
</li>
</ul>
</div>
</nav>
您可以讓CSS僅在x像素以上的屏幕寬度上顯示懸停下拉菜單。 然后，單擊功能在折疊時將正常工作。 例如，如果要顯示在768以上：
@media only screen and (min-width: 768px) {
.dropdown:hover>.dropdown-menu {display: block;}
}
自定義 Bootstrap Navbar 下拉菜單會在屏幕較小時破壞設計
[英]Customize Bootstrap Navbar dropdown destroying the design when screen is small
Bootstrap 4使導航欄品牌圖像在大屏幕上重疊並縮小以適合小屏幕
[英]Bootstrap 4 make the navbar-brand image overlap on big screen & shrink-to-fit on small screen
bootstrap 3折疊的導航欄-展開時屏幕上的下拉標題
[英]bootstrap 3 collapsed navbar - dropdown titles out of screen when expanded
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.