单击按钮时，不显示导航栏菜单，也不切换菜单 [英] Navbar menu are not showing and menu are not toggle when clicking button
本文介绍了单击按钮时，不显示导航栏菜单，也不切换菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
NavBar menu are not showing and menu are not toggle when clicking button
我是什么尝试过：
What I have tried:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="AdminDash.master.vb" Inherits="BootstrapProject.AdminDash" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<%-- <script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery-3.3.1.min.js"></script>--%>
<%-- <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">--%>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<%-- <form id="form1" runat="server" >--%>
<nav class="navbar navbar-expand navbar-dark bg-primary"> <a href="#menu-toggle" id="menu-toggle" class="navbar-brand"><span class="navbar-toggler-icon"></span></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExample02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
</ul>
<form class="form-inline my-2 my-md-0"> </form>
</div>
</nav>
<div id="wrapper" class="toggled">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"> <a href="#"> Start Bootstrap </a> </li>
<li> <a href="#">Dashboard</a> </li>
<li> <a href="#">Shortcuts</a> </li>
<li> <a href="#">Overview</a> </li>
<li> <a href="#">Events</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Services</a> </li>
<li> <a href="#">Contact</a> </li>
</ul>
</div> <!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<h1>Valueance Technology</h1>
<p></p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
</div>
</div> <!-- /#page-content-wrapper -->
</div> <!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script> <!-- Menu Toggle Script -->
<script>
$(function(){
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
$(window).resize(function(e) {
if($(window).width()<=768){
$("#wrapper").removeClass("toggled");
}else{
$("#wrapper").addClass("toggled");
}
});
});
</script>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<%-- </form>--%>
</body>
</html>
推荐答案
（function（）{
(function(){
（ ＃menu-toggle）。click（function（e）{
e.preventDefault（）;
("#menu-toggle").click(function(e) { e.preventDefault();
（＃wrapper）。toggleClass（toggled）;
}）;
("#wrapper").toggleClass("toggled"); });
这篇关于单击按钮时，不显示导航栏菜单，也不切换菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
