Jquery 导航栏 [平板电脑/移动视图]

Question

我是 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>
    
 

Answer 1

如果我理解它的好问题是service 下拉菜单在您打开主下拉菜单时正在打开，而您不希望这样.. 好吧.. 这就是问题

$('.my-mobile-menu').click(function(){
            $('.my-header-navmenu nav ul').slideToggle(250,'swing');
        });

当你点击按钮时，你告诉它打开nav ul。它将找到nav 中的每个ul 元素并打开它。

然后通过定位 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 元素。

Answer 2

你的意思是这样吗？

    $(document).ready(function(){
    	$('.my-mobile-menu').click(function(){
    		$('.my-header-navmenu nav ul').slideToggle(250,'swing'); //this shows all ul including the service nav
            $('.my-ul-service').hide(); //just hide it here
    	});
    
    	$('.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>