使用Bootstrap 4在導航欄中懸停問題
[英]Hover issue in navbar with Bootstrap 4
問題描述
我創建了一個帶有Bootstrap 4的navbar 。當我點擊一個下拉菜單鏈接時，它會打開並保持打開狀態 - 當我將鼠標懸停在另一個下拉鏈接上時，它們會重疊。
如果我將鼠標懸停在另一個下拉鏈接上，我希望它能夠關閉下拉鏈接。
這是我的navbar下拉列表的代碼：
.dropdown:hover>.dropdown-menu { display: block; }
<!DOCTYPE html> <html lang="en"> <head> <title> Welcome - Maqbool Solutions </title> <link rel="shortcut icon" href="../images/favion_Y13_5.ico" type="image/x-icon"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <script src="../../js/function.js"></script> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="font/css/font-awesome.css"> </head> <body> <div class="container-fluid"> <!--main container--> <!-- navbar--> <nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar" style=" height: 80px;"> <div id="logo"> <a href="index.html"> <h3 class="logo_text">Maqbool Solutions</h3> </a> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto" id="ul"> <li class="nav-item " align="center"> <i class="fa fa-home " aria-hidden="true"></i> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown" align="center"> <i class="fa fa-cubes" aria-hidden="true"></i> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Products </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="products/ims/ims.html">Institute Managment Systems</a> <a class="dropdown-item" href="products/pnms/pnms.html">Pension Managment Systems</a> <a class="dropdown-item" href="products/pms/pms.html">Property Managment Systems</a> <a class="dropdown-item" href="products/labms/labms.html">Laboratory Managment Systems</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="products/apps/apps.html">Apps</a> </div> </li> <li class="nav-item dropdown" align="center"> <i class="fa fa-cogs" aria-hidden="true"></i> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="services/skill_service.html">Training and Skills</a> <a class="dropdown-item" href="services/indestrial_services.html">Industry Expertise</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="services/web_service.html">Web services</a> <a class="dropdown-item" href="services/software_service.html">Software services</a> <a class="dropdown-item" href="services/animation_service.html">Animation services</a> <a class="dropdown-item" href="services/graphic_service.html">Graphic services</a> <a class="dropdown-item" href="services/game_service.html">Game services</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="services/apps_service.html">App services</a> </div> </li> <li class="nav-item dropdown" align="center"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Training </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="training/soft.html">Software Designing & Development</a> <a class="dropdown-item" href="training/design.html">Designing & Composing</a> <a class="dropdown-item" href="training/web.html">Web Designing & Development</a> <a class="dropdown-item" href="training/animation.html">2D&3D Animation & Development </a> <a class="dropdown-item" href="training/game.html">Game Development </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="training/app.html">App Development </a> </div> </li> <li class="nav-item dropdown" align="center"> <i class="fa fa-briefcase" aria-hidden="true"></i> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About Us </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="aboutus/hwr.html">Who we are</a> <a class="dropdown-item" href="aboutus/our_vision.html">Our vision</a> <a class="dropdown-item" href="aboutus/our_team.html">Our Team</a> <a class="dropdown-item" href="aboutus/policy.html">Privacy & Policy</a> </div> </li> <li class="nav-item dropdown" align="center"> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Career </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="career/jobs.html">Jobs</a> <a class="dropdown-item" href="career/inter.html">Internship</a> <a class="dropdown-item" href="career/hiring.html">Our Hirring process</a> </div> </li> <li class="nav-item" align="center"> <i class="fa fa-pencil" aria-hidden="true"></i> <a class="nav-link" href="contect_us.html">Contact Us</a> </li> </ul> </div> <hr class="col-md-12 nav_hr"> </nav> <!--end of navbar--> </div> </body> </html>
3 個解決方案
解決方案1
2 已采納 2018-01-02 08:50:26
您必須在自定義js文件中添加以下jQuery代碼
$('.nav-link').hover(function() {
$(this).closest('.nav-item.dropdown').siblings('.nav-item.dropdown').removeClass('show').find('.dropdown-menu').removeClass('show');
})
問題是，當您單擊dropdown link ，名為show的類將添加到.nav-item.dropdown和.dropdown-menu ，因此您必須在將鼠標懸停在其他dropdown link時刪除show class
$('.nav-link').hover(function() { $(this).closest('.nav-item.dropdown').siblings('.nav-item.dropdown').removeClass('show').find('.dropdown-menu').removeClass('show'); })
.dropdown:hover>.dropdown-menu { display: block; }
<!DOCTYPE html> <html lang="en"> <head> <title> Welcome - Maqbool Solutions </title> <link rel="shortcut icon" href="../images/favion_Y13_5.ico" type="image/x-icon"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <!--main container--> <!-- navbar--> <nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar" style=" height: 80px;"> <div id="logo"> <a href="index.html"> <h3 class="logo_text">Maqbool Solutions</h3> </a> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto" id="ul"> <li class="nav-item " align="center"> <i class="fa fa-home " aria-hidden="true"></i> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown" align="center"> <i class="fa fa-cubes" aria-hidden="true"></i> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Products </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="products/ims/ims.html">Institute Managment Systems</a> <a class="dropdown-item" href="products/pnms/pnms.html">Pension Managment Systems</a> <a class="dropdown-item" href="products/pms/pms.html">Property Managment Systems</a> <a class="dropdown-item" href="products/labms/labms.html">Laboratory Managment Systems</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="products/apps/apps.html">Apps</a> </div> </li> <li class="nav-item dropdown" align="center"> <i class="fa fa-cogs" aria-hidden="true"></i> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="services/skill_service.html">Training and Skills</a> <a class="dropdown-item" href="services/indestrial_services.html">Industry Expertise</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="services/web_service.html">Web services</a> <a class="dropdown-item" href="services/software_service.html">Software services</a> <a class="dropdown-item" href="services/animation_service.html">Animation services</a> <a class="dropdown-item" href="services/graphic_service.html">Graphic services</a> <a class="dropdown-item" href="services/game_service.html">Game services</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="services/apps_service.html">App services</a> </div> </li> <li class="nav-item dropdown" align="center"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Training </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="training/soft.html">Software Designing & Development</a> <a class="dropdown-item" href="training/design.html">Designing & Composing</a> <a class="dropdown-item" href="training/web.html">Web Designing & Development</a> <a class="dropdown-item" href="training/animation.html">2D&3D Animation & Development </a> <a class="dropdown-item" href="training/game.html">Game Development </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="training/app.html">App Development </a> </div> </li> <li class="nav-item dropdown" align="center"> <i class="fa fa-briefcase" aria-hidden="true"></i> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About Us </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="aboutus/hwr.html">Who we are</a> <a class="dropdown-item" href="aboutus/our_vision.html">Our vision</a> <a class="dropdown-item" href="aboutus/our_team.html">Our Team</a> <a class="dropdown-item" href="aboutus/policy.html">Privacy & Policy</a> </div> </li> <li class="nav-item dropdown" align="center"> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Career </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="career/jobs.html">Jobs</a> <a class="dropdown-item" href="career/inter.html">Internship</a> <a class="dropdown-item" href="career/hiring.html">Our Hirring process</a> </div> </li> <li class="nav-item" align="center"> <i class="fa fa-pencil" aria-hidden="true"></i> <a class="nav-link" href="contect_us.html">Contact Us</a> </li> </ul> </div> <hr class="col-md-12 nav_hr"> </nav> <!--end of navbar--> </div> </body> </html>
解決方案2
0 2018-01-02 09:08:21
在您的代碼中，當觸發鼠標懸停或單擊事件時，“show”類將應用於子菜單（下拉菜單）元素。
所以你可以覆蓋那個類，如：
.dropdown-menu.show {
display: none;
}
解決您的問題並僅在懸停時顯示菜單項
解決方案3
0 2018-01-02 10:03:38
簡單添加以下CSS行：
.dropdown:hover > .dropdown-menu,
.dropdown:hover > .dropdown-menu.show {
display: block;
}
.dropdown > .dropdown-menu,
.dropdown > .dropdown-menu.show {
display: none;
}
如果不是移動設備，則懸停時Bootstrap Navbar下拉列表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.