时间戳

首页 > 解决方案 > 在 Bootstrap 导航栏折叠或展开时触发 JavaScript？

javascript - 在 Bootstrap 导航栏折叠或展开时触发 JavaScript？

问题描述

每当 Bootstrap 导航栏展开或折叠时，我都会尝试触发一些 JavaScript 来执行。

我已经被这个问题困扰了几天，而且我在网上找到的解决方案似乎都没有以可靠的方式工作。

<!-- Font awesome -->
    <link href="https://markups.io/demo/osteriax/assets/css/font-awesome.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="https://markups.io/demo/osteriax/assets/css/bootstrap.css" rel="stylesheet">   
    <!-- Slick slider -->
    <link rel="stylesheet" type="text/css" href="https://markups.io/demo/osteriax/assets/css/slick.css">    
    <!-- Date Picker -->
    <link rel="stylesheet" type="text/css" href="https://markups.io/demo/osteriax/assets/css/bootstrap-datepicker.css">   
     <!-- Gallery Lightbox -->
    <link href="https://markups.io/demo/osteriax/assets/css/magnific-popup.css" rel="stylesheet"> 
    <!-- Theme color -->
    <link id="switcher" href="https://markups.io/demo/osteriax/assets/css/theme-color/default-theme.css" rel="stylesheet">     

    <!-- Main style sheet -->
    <link href="https://markups.io/demo/osteriax/style.css" rel="stylesheet">



 <!-- Start header section -->
  <header id="mu-header">  
    <nav class="navbar navbar-default mu-main-navbar" role="navigation">  
      <div class="container">
        <div class="navbar-header">
          <!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
          <button id="navDrop" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <!-- LOGO -->       

           <!--  Text based logo  -->
          <a class="navbar-brand" href="index.html">Osteria<span>X</span></a> 

              <!--  Image based logo  -->
          <!-- <a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" alt="Logo img"></a>  -->


        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav">
            <li><a href="index.html">HOME</a></li>
            <li><a href="#mu-about-us">ABOUT US</a></li>                       
            <li><a href="#mu-restaurant-menu">MENU</a></li>                       
            <li><a href="#mu-reservation">RESERVATION</a></li>                       
            <li><a href="#mu-gallery">GALLERY</a></li>
            <li><a href="#mu-chef">OUR CHEFS</a></li> 
            <li><a href="#mu-contact">CONTACT</a></li> 
          </ul>                            
        </div><!--/.nav-collapse -->       
      </div>          
    </nav> 
  </header>
  <!-- End header section -->



  <!-- jQuery library -->
  <script src="https://markups.io/demo/osteriax/assets/js/jquery.min.js"></script>  
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://markups.io/demo/osteriax/assets/js/bootstrap.js"></script>   
  <!-- Slick slider -->
  <script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/slick.js"></script>
  <!-- Counter -->
  <script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/simple-animated-counter.js"></script>
  <!-- Gallery Lightbox -->
  <script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/jquery.magnific-popup.min.js"></script>
  <!-- Date Picker -->
  <script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/bootstrap-datepicker.js"></script> 
  <!-- Ajax contact form  -->
  <script type="text/javascript" src="https://markups.io/demo/osteriax/assets/js/app.js"></script>

  <!-- Custom js -->
 <script src="https://markups.io/demo/osteriax/assets/js/custom.js"></script>

然后是 JavaScript：

<script>
/* JS: */
$(document).ready(function(){
  $("#navDrop").on("hide.bs.dropdown", function(){
    alert(3);
  });
  $("#navDrop").on("show.bs.dropdown", function(){
    alert(4);
  });
});
</script>

上面的代码似乎不起作用..提前感谢您的任何建议，非常感谢:)

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

您正在寻找collapse事件，而不是下拉菜单。此外，请确保您的目标是导航栏，而不是切换按钮。

<script>
$(document).ready(function(){
  $(".navbar").on("hide.bs.collapse", function(){
    alert(3);
  });
  $(".navbar").on("show.bs.collapse", function(){
    alert(4);
  });
});
</script>

推荐阅读