jquery - Jquery 导航栏 [平板电脑/移动视图]
问题描述
我是 jquery 的新手。当我在移动视图上打开和关闭导航栏时,slideToggle 流被后代“ul”弄乱了。当我关闭导航栏时,jquery 将后代 ul 显示更改为阻止(显示:块),这导致幻灯片流混乱。我不知道如何克服这个问题,因为我是 jquery 的新手。请帮助我提供任何参考或纠正我做错的地方。
$(document).ready(function(){
$('.my-mobile-menu').click(function(){
$('.my-header-navmenu nav ul').slideToggle(250,'swing');
});
$('.my-pa-service').on('click',function(e){
$('.my-ul-service').slideToggle('swing');
});
});
body{
box-sizing: border-box;
padding: 0;
margin: 0;
width: 100%;
}
ul{
margin: 0px;
padding: 0px;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
margin: 0;
padding: 0;
}
a:hover{
text-decoration: none;
}
/* ///////////// color codes //////////////*/
.greyblack-bg{
background:#343a40;
}
.white-bg{
background:#ffffff;
}
/*////////////// header ////////////////*/
.my-header-nav{
padding: 0px;
margin: 0px;
}
.my-header-nav nav ul{
padding: 0px;
margin: 0px;
}
.my-header-nav nav ul li{
display: inline-block;
}
.my-header-nav nav ul li a{
display: block;
font-size: 16px;
padding: 35px 10px 35px 10px;
font-family:"Rubik",sans-serif;
text-transform: capitalize;
font-weight: 400;
color: #191d34;
transition: 0.3s;
text-decoration: none;
position: relative;
}
.my-header-nav nav ul li .my-ul-service{
display: none;
}
.my-mobile-menu{
position: absolute;
top: -8px;
right: 25px;
}
.my-mobile-menu a{
font-size: 35px;
display: block;
text-align: right;
color: #021238;
}
/*/////// Responsive Menu //////*/
@media screen and (min-width: 992px){
.my-header-nav nav ul{
display: block !important;
}
}
@media (max-width: 991px) {
.my-header-navmenu{
padding: 10px 0;
height: 60px;
}
.my-header-navmenu .my-header-nav{
position: absolute;
left: 50px;
right: 50px;
height: 100%;
top: 45px;
}
.my-header-nav nav ul {
background:#ffffff;
opacity: 98%;
display: none;
}
.my-header-nav nav ul li{
display: block;
}
.my-header-nav nav ul li a{
display: block;
font-size: 14px;
padding: 5px 10px;
margin: 2px 5px;
font-family:"Rubik",sans-serif;
text-transform: capitalize;
font-weight: 400;
color: #191d34;
text-decoration: none;
}
.my-header-nav nav ul li a.active-page{
color:#ff5e13;
}
.my-header-nav nav ul li a:hover{
color:#ff5e13;
transition: 0.5s;
}
.my-header-nav nav ul li .my-ul-service{
display: none;
}
.my-header-nav nav ul li .my-ul-service li{
display: block;
}
.my-header-nav nav ul li .my-ul-service li a{
display: block;
font-size: 14px;
padding: 5px 10px;
margin: 2px 5px;
font-family:"Rubik",sans-serif;
text-transform: capitalize;
font-weight: 400;
color: #191d34;
text-decoration: none;
}
}
@media (max-width: 575px) {
.my-header-navmenu .my-header-nav{
position: absolute;
left: 5px;
right: 5px;
height: 100%;
top: 45px;
}
}
.asdf{
height: 300px;
background-color:#ff5e13;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>My First Bootstrap Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS here -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="my-header-area">
<div class="my-header-navmenu white-bg">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12 col-xl-12">
<div class="my-header-nav "><!--d-none d-lg-block-->
<nav>
<ul class="my-ul-nav">
<li><a href="#" class="active-page">Home</a></li>
<li><a href="#">About</a></li>
<li class="my-pa-service"><a href="#">service</a>
<ul class="my-ul-service">
<li><a href="#">service1</a></li>
<li><a href="#">service1</a></li>
<li><a href="#">service3</a></li>
</ul>
</li>
<li><a href="#">blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="col-12">
<div class="my-mobile-menu d-block d-lg-none"><a href="#"><i class="fa fa-bars" aria-hidden="true"></i></a></div>
</div>
</div>
</div>
</div>
</div>
<div class="asdf">
</div>
<!-- JS here -->
<script src="js/navigationbar.js"></script>
解决方案
如果我理解它的好问题是service
当您打开主下拉菜单时下拉菜单正在打开并且您不想要那个..好吧..这就是问题
$('.my-mobile-menu').click(function(){
$('.my-header-navmenu nav ul').slideToggle(250,'swing');
});
nav ul
当您单击按钮时,您会告诉它打开。它将找到其中ul
的每个元素nav
并打开它。
而不是通过定位 html 标签来打开它,而是尝试添加类并定位它们。
$('.my-mobile-menu').click(function(){
$('.my-header-navmenu nav .my-ul-nav').slideToggle(250,'swing');
});
或者您可以保留它,但像这样更改选择器
$('.my-mobile-menu').click(function(){
$('.my-header-navmenu nav>ul').slideToggle(250,'swing');
});
请注意,我添加了>
. 它将仅针对元素的直接第一个子nav
元素。
推荐阅读
- percona - 两个数据中心之间的连接断开时继续工作
- angularjs - 如何监视也被属性引用的函数
- c# - 如何将 C# 对象序列化为特定的 JSON
- soap - MarkAsJunk 操作错误代码 9020。获取“发生内部服务器错误。操作失败。”
- android - 在 Kotlin 的 CalendarView 中取消选择选定的日期
- apache-spark - Hive unix_timestamp 在源列中无法工作毫秒
- python - 不能使标签更宽
- python - 当我尝试在 Sobel 模糊中使用 64F 时,python 中的 OpenCV 会抱怨
- php - 同一个生成器上的多个循环 - PHP
- azure - 从 Azure 触发函数执行 Azure 存储过程