单击任何其他按钮时,我的导航栏下拉菜单不会关闭,但我已设置所需的jquery代码。我希望当按下任何其他支持按钮时,下拉菜单会向上滑动(蓝色按钮),而不仅仅是单击它自己的支持按钮。
$(document).ready(function() {
var scrollTop = 0;
$(window).scroll(function() {
scrollTop = $(window).scrollTop();
$('.counter').html(scrollTop);
if (jQuery(window).width() > 936) {
if (scrollTop >= 100) {
$('.navbar').addClass('scrolled-nav');
$('.navbar_menu a').addClass('scrolled-nav');
$('#logo').stop().animate({
'height': '45px'
}, 500);
} else if (scrollTop < 100) {
$('.navbar').removeClass('scrolled-nav');
$('.navbar_menu a').removeClass('scrolled-nav');
$('#logo').stop().animate({
'height': '60px'
}, 500);
}
}
});
});
if ($(window).width() <= 936) {
};
if ($(window).width() > 936) {
$('#services').hover(function() {
$('#services_dropdown').slideDown(200);
});
if ($('#services_dropdown').is(':hover')) {
$('#services_dropdown').mouseleave(function() {
$('#services_dropdown').slideUp(200);
})
} else {
$('#services_div').mouseleave(function() {
$('#services_dropdown').slideUp(200);
})
}
};
$(document).ready(function() {
if ($(window).width() <= 936) {
$('#mini_navbar').click(function() {
$('.navbar_menu').stop(true, true).slideToggle(200);
});
if ($('.navbar_menu_item_dropdown').is(':visible')) {
$('.navbar_menu_item').click(function() {
$('.navbar_menu_item_dropdown').stop(true, true).slideUp(200);
})
} else {
$('#services').click(function() {
$('#spacer').stop(true, true).slideToggle(200);
$('#services_dropdown').stop(true, true).slideToggle(200);
});
}
};
})
&#13;
html,
body {
height: 2000px;
width: 100%;
margin: 0;
padding: 0;
background: #e6e6e6;
}
html {
font-family: "helvetica neue", sans-serif;
}
body {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 1519px;
}
.navbar {
text-align: right;
height: 70px;
line-height: 70px;
position: fixed;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 1519px;
z-index: 102;
-webkit-transition: height .5s, line-height .5s;
/* Safari */
transition: height .5s, line-height .5s;
}
.navbar img {
float: left;
height: 60px;
margin: 5px 0px 0px 15px;
}
.navbar_menu {
margin: 0 100px 0 0;
}
#navbar_menu_item_cover {
height: 100%;
width: auto;
display: inline-block;
}
.navbar_menu_item {
float: left;
text-align: center;
height: 71px;
position: relative;
}
.navbar_menu_item ul {
display: none;
text-align: center;
padding: 0;
position: relative;
top: -14px;
}
.navbar_menu_item li {
list-style: none;
margin: 0;
padding: 0;
line-height: 30px;
border: 1px solid rgba(0, 0, 0, 0.1);
background: #FFF;
color: #007790;
}
.navbar_menu_item li:hover {
background: #007790;
color: #FFF;
}
.navbar_menu a {
clear: both;
text-decoration: none;
color: #f2f2f2;
margin: 0 15px;
font-size: 20px;
line-height: 50px;
-webkit-transition: height .5s, font-size .5s;
/* Safari */
transition: height .5s, font-size .5s;
}
.navbar_menu a:hover {
color: #007790;
}
#mini_navbar {
margin: 35px 40px 0 0;
font-size: 28px;
line-height: 0px;
display: none;
width: 26px;
float: right;
color: #FFF;
}
.scrolled-nav {
height: 60px !important;
line-height: 60px !important;
font-size: 15px !important;
}
.navbar_menu a:hover {}
#section_first {
width: 100%;
height: auto;
}
.cycle-slideshow img {
height: auto;
display: block;
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
overflow: hidden;
height: auto;
margin: 0;
padding: 0;
}
.cycle-pager {
width: 100%;
text-align: center;
position: absolute;
z-index: 101;
top: 95%;
}
.cycle-pager span {
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 5px;
text-indent: 100%;
white-space: nowrap;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {
background: #FFF;
}
#toggle {
display: none;
}
@media only screen and (max-width:936px) {
#mini_navbar {
display: block;
cursor: pointer;
}
.navbar_menu_item_cover {
background: #FFF;
width: 100%;
}
.navbar_menu_item {
position: relative;
top: 6px;
width: 100%;
}
.navbar_menu_item li {
line-height: 50px;
width: 100%;
}
.navbar {
background: #3581AA;
position: relative;
}
.navbar_menu {
text-align: center;
width: 100%;
display: none;
clear: both;
}
.navbar_menu_item_cover {
width: 100%;
text-align: center;
clear: both;
margin: 0;
}
.navbar_menu_item {
width: 100%;
margin: 0;
padding: 0;
height: 51px;
}
.navbar_menu_item_dropdown {
position: relative;
margin-top: 14px;
display: none;
}
.navbar_menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
background: #64a9ce;
}
.navbar_menu a:hover {
color: #FFF;
}
.cycle-pager {
display: none;
}
#first_slide {
content: url('../images/slide_7_2.jpg');
}
#second_slide {
content: url('../images/slide_9_2.jpg');
}
#third_slide {
content: url('../images/slide_10_2.jpg');
}
#fourth_slide {
content: url('../images/slide_8_2.jpg');
}
}
@media only screen and (max-width:320px) {
#first_slide {
content: url('../images/slide_7_1.jpg');
}
#second_slide {
content: url('../images/slide_9_1.jpg');
}
#third_slide {
content: url('../images/slide_10_1.jpg');
}
#fourth_slide {
content: url('../images/slide_8_1.jpg');
}
.cycle-slideshow {
width: 320px;
height: 396px;
}
}
.clear {
clear: both;
}
#section_second {
background: #F8DDA1;
width: 100%;
height: 500px;
margin: 0;
}
#spacer {
width: 100%;
height: 724px;
display: none;
}
&#13;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sea Güzellik</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<header>
<div class="navbar">
<img id="logo" src="images/Sea_logo_edited_22.png" alt="Logo">
<div id="mini_navbar">☰</div>
<div class="navbar_menu">
<div id="navbar_menu_item_cover">
<div class="navbar_menu_item"><a id="home" href="#">Anasayfa</a></div>
<div class="navbar_menu_item"><a id="about" href="#">Hakkımızda</a></div>
<div class="navbar_menu_item"><a id="deals" href="#">Kampanyalar</a></div>
<div id="services_div" class="navbar_menu_item"><a id="services" href="#">Hizmetlerimiz</a>
<ul class="navbar_menu_item_dropdown" id="services_dropdown">
<li>asdfasf</li>
<li>adsfasfd</li>
<li>asdfasf</li>
<li>asdfaf</li>
<li>asdfdaf</li>
<li>asddffaf</li>
<li>assdfdfaf</li>
<li>asdffaf</li>
<li>assdfaf</li>
<li>asadfaf</li>
</ul>
</div>
<div id="spacer"></div>
<div class="navbar_menu_item"><a href="#">İletişim</a></div>
</div>
</div>
</div>
</header>
<section id="section_first">
<ul class="cycle-slideshow" data-cycle-swipe=true data-cycle-swipe-fx=scrollHorz data-cycle-slides="li">
<span class="cycle-pager"></span>
<li>
<a href=""><img id="first_slide" src="images/slide_7.jpg" alt=""></a>
</li>
<li>
<a href=""><img id="second_slide" src="images/slide_9.jpg" alt=""></a>
</li>
<li>
<a href=""><img id="third_slide" src="images/slide_10.jpg" alt=""></a>
</li>
<li>
<a href=""><img id="fourth_slide" src="images/slide_8.jpg" alt=""></a>
</li>
</ul>
</section>
<section id="section_second">
</section>
<div class="clear"></div>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.swipe.min.js"></script>
</body>
</html>
&#13;
单击任何其他按钮时,我的导航栏下拉菜单不会关闭,但我已设置所需的jquery代码。我希望当按下任何其他支持按钮时,下拉菜单会向上滑动(蓝色按钮),而不仅仅是单击它自己的支持按钮。
答案 0 :(得分:0)
$(document).ready(function() {
var scrollTop = 0;
$(window).scroll(function() {
scrollTop = $(window).scrollTop();
$('.counter').html(scrollTop);
if (jQuery(window).width() > 936) {
if (scrollTop >= 100) {
$('.navbar').addClass('scrolled-nav');
$('.navbar_menu a').addClass('scrolled-nav');
$('#logo').stop().animate({
'height': '45px'
}, 500);
} else if (scrollTop < 100) {
$('.navbar').removeClass('scrolled-nav');
$('.navbar_menu a').removeClass('scrolled-nav');
$('#logo').stop().animate({
'height': '60px'
}, 500);
}
}
});
});
if ($(window).width() <= 936) {
};
if ($(window).width() > 936) {
$('#services').hover(function() {
$('#services_dropdown').slideDown(200);
});
if ($('#services_dropdown').is(':hover')) {
$('#services_dropdown').mouseleave(function() {
$('#services_dropdown').slideUp(200);
})
} else {
$('#services_div').mouseleave(function() {
$('#services_dropdown').slideUp(200);
})
}
};
$(document).ready(function() {
if ($(window).width() <= 936) {
$('#mini_navbar').click(function() {
$('.navbar_menu').stop(true, true).slideToggle(200);
});
$(".navbar_menu_item").not("#services_div").click(function() {
$('.navbar_menu_item_dropdown').slideUp(200);
$('#spacer').slideUp(200);
});
if ($('.navbar_menu_item_dropdown').is(':visible')) {
$('.navbar_menu_item').click(function() {
$('.navbar_menu_item_dropdown').stop(true, true).slideUp(200);
})
} else {
$('#services').click(function() {
$('#spacer').stop(true, true).slideToggle(200);
$('#services_dropdown').stop(true, true).slideToggle(200);
});
}
};
})
html,
body {
height: 2000px;
width: 100%;
margin: 0;
padding: 0;
background: #e6e6e6;
}
html {
font-family: "helvetica neue", sans-serif;
}
body {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 1519px;
}
.navbar {
text-align: right;
height: 70px;
line-height: 70px;
position: fixed;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 1519px;
z-index: 102;
-webkit-transition: height .5s, line-height .5s;
/* Safari */
transition: height .5s, line-height .5s;
}
.navbar img {
float: left;
height: 60px;
margin: 5px 0px 0px 15px;
}
.navbar_menu {
margin: 0 100px 0 0;
}
#navbar_menu_item_cover {
height: 100%;
width: auto;
display: inline-block;
}
.navbar_menu_item {
float: left;
text-align: center;
height: 71px;
position: relative;
}
.navbar_menu_item ul {
display: none;
text-align: center;
padding: 0;
position: relative;
top: -14px;
}
.navbar_menu_item li {
list-style: none;
margin: 0;
padding: 0;
line-height: 30px;
border: 1px solid rgba(0, 0, 0, 0.1);
background: #FFF;
color: #007790;
}
.navbar_menu_item li:hover {
background: #007790;
color: #FFF;
}
.navbar_menu a {
clear: both;
text-decoration: none;
color: #f2f2f2;
margin: 0 15px;
font-size: 20px;
line-height: 50px;
-webkit-transition: height .5s, font-size .5s;
/* Safari */
transition: height .5s, font-size .5s;
}
.navbar_menu a:hover {
color: #007790;
}
#mini_navbar {
margin: 35px 40px 0 0;
font-size: 28px;
line-height: 0px;
display: none;
width: 26px;
float: right;
color: #FFF;
}
.scrolled-nav {
height: 60px !important;
line-height: 60px !important;
font-size: 15px !important;
}
.navbar_menu a:hover {}
#section_first {
width: 100%;
height: auto;
}
.cycle-slideshow img {
height: auto;
display: block;
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
overflow: hidden;
height: auto;
margin: 0;
padding: 0;
}
.cycle-pager {
width: 100%;
text-align: center;
position: absolute;
z-index: 101;
top: 95%;
}
.cycle-pager span {
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 5px;
text-indent: 100%;
white-space: nowrap;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {
background: #FFF;
}
#toggle {
display: none;
}
@media only screen and (max-width:936px) {
#mini_navbar {
display: block;
cursor: pointer;
}
.navbar_menu_item_cover {
background: #FFF;
width: 100%;
}
.navbar_menu_item {
position: relative;
top: 6px;
width: 100%;
}
.navbar_menu_item li {
line-height: 50px;
width: 100%;
}
.navbar {
background: #3581AA;
position: relative;
}
.navbar_menu {
text-align: center;
width: 100%;
display: none;
clear: both;
}
.navbar_menu_item_cover {
width: 100%;
text-align: center;
clear: both;
margin: 0;
}
.navbar_menu_item {
width: 100%;
margin: 0;
padding: 0;
height: 51px;
}
.navbar_menu_item_dropdown {
position: relative;
margin-top: 14px;
display: none;
}
.navbar_menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
background: #64a9ce;
}
.navbar_menu a:hover {
color: #FFF;
}
.cycle-pager {
display: none;
}
#first_slide {
content: url('../images/slide_7_2.jpg');
}
#second_slide {
content: url('../images/slide_9_2.jpg');
}
#third_slide {
content: url('../images/slide_10_2.jpg');
}
#fourth_slide {
content: url('../images/slide_8_2.jpg');
}
}
@media only screen and (max-width:320px) {
#first_slide {
content: url('../images/slide_7_1.jpg');
}
#second_slide {
content: url('../images/slide_9_1.jpg');
}
#third_slide {
content: url('../images/slide_10_1.jpg');
}
#fourth_slide {
content: url('../images/slide_8_1.jpg');
}
.cycle-slideshow {
width: 320px;
height: 396px;
}
}
.clear {
clear: both;
}
#section_second {
background: #F8DDA1;
width: 100%;
height: 500px;
margin: 0;
}
#spacer {
width: 100%;
height: 724px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sea Güzellik</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<header>
<div class="navbar">
<img id="logo" src="images/Sea_logo_edited_22.png" alt="Logo">
<div id="mini_navbar">☰</div>
<div class="navbar_menu">
<div id="navbar_menu_item_cover">
<div class="navbar_menu_item"><a id="home" href="#">Anasayfa</a></div>
<div class="navbar_menu_item"><a id="about" href="#">Hakkımızda</a></div>
<div class="navbar_menu_item"><a id="deals" href="#">Kampanyalar</a></div>
<div id="services_div" class="navbar_menu_item"><a id="services" href="#">Hizmetlerimiz</a>
<ul class="navbar_menu_item_dropdown" id="services_dropdown">
<li>asdfasf</li>
<li>adsfasfd</li>
<li>asdfasf</li>
<li>asdfaf</li>
<li>asdfdaf</li>
<li>asddffaf</li>
<li>assdfdfaf</li>
<li>asdffaf</li>
<li>assdfaf</li>
<li>asadfaf</li>
</ul>
</div>
<div id="spacer"></div>
<div class="navbar_menu_item"><a href="#">İletişim</a></div>
</div>
</div>
</div>
</header>
<section id="section_first">
<ul class="cycle-slideshow" data-cycle-swipe=true data-cycle-swipe-fx=scrollHorz data-cycle-slides="li">
<span class="cycle-pager"></span>
<li>
<a href=""><img id="first_slide" src="images/slide_7.jpg" alt=""></a>
</li>
<li>
<a href=""><img id="second_slide" src="images/slide_9.jpg" alt=""></a>
</li>
<li>
<a href=""><img id="third_slide" src="images/slide_10.jpg" alt=""></a>
</li>
<li>
<a href=""><img id="fourth_slide" src="images/slide_8.jpg" alt=""></a>
</li>
</ul>
</section>
<section id="section_second">
</section>
<div class="clear"></div>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.swipe.min.js"></script>
</body>
</html>
尝试此代码段。它正在工作。