这是我的菜单代码。它工作正常。但是,我想实现一件事,目前,当我点击菜单栏外面时,它不会隐藏或关闭。 即使我在菜单栏处于活动状态时单击网页上的任意位置,我也想隐藏菜单栏。
UPDATE A
SET Sector = C.Sector
FROM table_a A
INNER JOIN table_b B ON A.business_ID = CAST(B.business_id AS BIGINT)
INNER JOIN table_c C ON B.ACARA_SML_ID = C.ACARA_SML_ID
WHERE A.[STATE] = 'ABC';
function openNav() {
document.getElementById("mySidenav").style.width = "50%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
(function ($) {
// Instantiate MixItUp:
// $('Container').mixItUp();
// Add smooth scrolling to all links in navbar + footer link
$(".sidenav a").on('click', function(event) {
event.preventDefault();
var datanew= this.href;
var str2 = '.html';
if(datanew.indexOf(str2) != -1){
window.location.href = datanew;
}else{
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top},
900, function(){
alert(window.location);
window.location.hash = hash;
});
}
});
})(jQuery);
.sidenav {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-color: #ef4f50;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
/*max-height: 551px;*/
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
.menu-icon
{
color: #114576;
font-size: 30px;
margin-top: 40px;
margin-left: 40px;
cursor: pointer;
}
.control {
margin-top: 15px;
margin-right: 40px;
}
.menu{
min-height: 100px;
}
答案 0 :(得分:1)
尝试使用类似
的内容function openNav() {
document.getElementById("mySidenav").style.width = "50%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
(function($) {
// Instantiate MixItUp:
// $('Container').mixItUp();
// Add smooth scrolling to all links in navbar + footer link
$(".sidenav a").on('click', function(event) {
event.preventDefault();
var datanew = this.href;
var str2 = '.html';
if (datanew.indexOf(str2) != -1) {
window.location.href = datanew;
} else {
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
},
900,
function() {
alert(window.location);
window.location.hash = hash;
});
}
});
})(jQuery);
$(window).click(function(event) {
if ($(event.target).closest('div#mySidenav').length === 0 && $(event.target).closest('.menu-icon').length === 0) {
closeNav()
}
})
这将检查您是否点击了" openNav"或菜单中的任何地方
.sidenav {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-color: #ef4f50;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
/*max-height: 551px;*/
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #ffffff;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
.menu-icon {
color: #114576;
font-size: 30px;
margin-top: 40px;
margin-left: 40px;
cursor: pointer;
}
.control {
margin-top: 15px;
margin-right: 40px;
}
.menu {
min-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html" class="sidenavtext">Home</a>
<a href="about.html" class="sidenavtext">About Us</a>
<a href="whatwedo.html" class="sidenavtext">What We Do</a>
<a href="getinvolved.html" class="sidenavtext">Get Involved</a>
<a href="contactus.php" class="sidenavtext">Contact Us</a>
</div>
<div class="control">
<div class="col-md-4">
<img src="assets/img/logohome.png" class="pull-left img-responsive logo" alt="SAF Logo">
</div>
<div class="col-md-8">
<!-- Use any element to open the sidenav -->
<span onclick="openNav()" class="pull-right menu-icon">☰</span>
<button type="button" class="pull-right btn btn-danger btn-round donate">DONATE NOW</button>
</div>
</div>
</header>
&#13;
NestedScrollView
&#13;