Boostrap下拉菜單不起作用

-1

我發現我的下拉菜單（HOME CCTV）不工作。任何幫助，可以讚賞。是新手。下拉鍊接完美工作。對於下拉列表懸停Boostrap下拉菜單不起作用

 <nav class="navbar navbar-expand-lg"> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"> 
     <div class="bar1"></div> 
    <div class="bar2"></div> 
    <div class="bar3"></div> 
    </span> 
     </button> 
     <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
      <ul class="navbar-nav"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="home-cctv-intro.html" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Home CCTV 
     </a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
         <a class="dropdown-item" href="home-cctv-intro.html">Introduction</a> 
         <a class="dropdown-item" href="home-cctv-footage.html">Footage</a> 
         <a class="dropdown-item" href="home-cctv-cost.html">Costs</a> 
         <a class="dropdown-item" href="home-cctv-quote.html">Get a Quote</a> 
        </div> 
       </li> 


       <!-- jQuery first, then Popper.js, then Bootstrap JS --> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" crossorigin="anonymous"></script>

JS文件鏈接

$('body').on('mouseenter mouseleave','.dropdown',function(e){ 
    var _d=$(e.target).closest('.dropdown');_d.addClass('show'); 
    setTimeout(function(){ 
    _d[_d.is(':hover')?'addClass':'removeClass']('show'); 
    },300); 
});

來源

2017-11-11 Coder_Hameed

如果你使用CSS下拉菜單中，或者的js如果你使用一個請提供您的樣式表（CSS）。或創建新的小提琴jsfiddle.net –

「不工作」不是技術說明。 – Rob

-1

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("li.dropdown").hover(function(){ 
     $(this).toggleClass("show"); 
     $('.dropdown-menu').toggleClass("show"); 

     $('.nav-link.dropdown-toggle').attr('aria-expanded' , 'true'); 
    }); 
}); 
</script> 
</head> 
<body> 


    <nav class="navbar navbar-expand-lg"> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"> 
     <div class="bar1"></div> 
    <div class="bar2"></div> 
    <div class="bar3"></div> 
    </span> 
     </button> 
     <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
      <ul class="navbar-nav"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="home-cctv-intro.html" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Home CCTV 
        </a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
         <a class="dropdown-item" href="home-cctv-intro.html">Introduction</a> 
         <a class="dropdown-item" href="home-cctv-footage.html">Footage</a> 
         <a class="dropdown-item" href="home-cctv-cost.html">Costs</a> 
         <a class="dropdown-item" href="home-cctv-quote.html">Get a Quote</a> 
        </div> 
       </li> 
</ul> 
</div> 
</nav> 

       <!-- jQuery first, then Popper.js, then Bootstrap JS --> 


    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
    </body> 
</html>

來源

2017-11-11 15:30:39

Mine not working！''（ –

這是什麼？它是如何回答這個問題的？不要只是脫口而出的代碼，自己解釋！https://stackoverflow.com/help/how-to-answer – Rob

@Rob哎搶THX鏈路但我儘量幫助他及其對我的工作滴下來，但我沒有看到問題srry –

Boostrap下拉菜單不起作用

回答

相關問題