点击小设备的子元素打开特定的下拉菜单

问题描述 投票：1回答：4

我正在使用jquery和css3创建响应式菜单。这是我的jQuery

var ico = $('<span class="fa fa-caret-right"></span>');
          $('nav#nav li:has(ul)').append(ico);

          $('span.fa-caret-right').on('click',function(){
            $('nav#nav li:has(ul)').toggleClass('open');
          });

          $('a#toggle').on('click',function(e){
            $('html').toggleClass('open-menu');
            return false;
          });


          $('div#overlay').on('click',function(){
            $('html').removeClass('open-menu');
          })

正如你在小提琴here中看到的，当我点击“我们做什么”的图标时，两个子菜单都打开了。

我想一次打开一个特定的，并在单击其他子菜单父级时关闭它。

jquery html5 css3
4个回答
1
投票

嘿这段代码会帮助你。

		  $('nav#nav li:has(ul)').append("<span class='fa fa-caret-right'></span>");
      
      var icon = $('span.fa-caret-right');
		  
		  $('span.fa-caret-right').on('click',function() {
           if($(this).parent().hasClass('open')) {
               icon.parent().removeClass('open');
           } else {
               icon.parent().removeClass('open');
	        		 $(this).parent().addClass('open');
           }
		  });
		  
		  $('a#toggle').on('click',function(e){
			$('html').toggleClass('open-menu');
			return false;
		  });
		  
		  
		  $('div#overlay').on('click',function(){
			$('html').removeClass('open-menu');
		  })
body {
	font-family: 'Open Sans', sans-serif;
}
a	{ outline:none; cursor:pointer; text-decoration: none; }

nav{
	display:block;
}

/*** Navigation Menu :: Start***/
#nav {
	margin: 30px 0 0;
	float: left;
}
#nav ul li {
	float: left;
	text-transform: uppercase;
	margin-left: 5px;
}
#nav ul li a {
	font-size: 14px;
	color: #2d2d2d;
	padding: 8px 15px;
	border-radius: 5px;
	display: block;
}
#nav ul li a:hover,
#nav ul li.active a,
#nav ul li.quote a,
#nav ul li:hover a {
	background: #EF3E36;
	color: #fff;
}
a#toggle {
  position: absolute;
  top: 10px;
  left: 0;
  width: 40px;
  height: 40px;
  background: red;
  text-align: center;
  color: white;
  display: none;
  transition: all ease-out 0.3s;
}
a#toggle span {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
#nav {
  text-align: center;
  transition: all ease-out 0.3s;
}
#nav a { color: white; }
#nav ul {
  margin: 0;
  padding: 0;
  background-color: rgba(22,160,133, 0.8);
}
#nav ul li {
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
}
#nav ul li a {
  display: block;
  padding: 10px;
}
#nav ul li a span {
  margin-left: 15px;
  transition: all ease-out 0.3s;
  -webkit-transition: all ease-out 0.1s;
  display: none;
}
#nav ul li ul {
  display: none;
  position: absolute;
  top: 38px;
  width: 215px;
  text-align: left;
}
#nav ul li ul li { display: block; }
#nav ul li ul li a { display: block; }
#nav ul li:hover a span { transform: rotateZ(90deg); }
#nav ul li:hover ul { display: block; }

#nav ul li ul.sub-menu {
	position: absolute;
	background: #fff;
	border-radius: 5px;
	padding: 5px;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	display: none;
	z-index: 999999;
	top: 100%;
}
#nav ul li ul:before {
	border-bottom: 10px solid rgba(0, 0, 0, 0.2);
    border-left: 11px solid rgba(0, 0, 0, 0);
    border-right: 11px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    position: absolute;
    left: 23px;
    top: -10px;
}
#nav ul li ul:after {
	border-bottom: 9px solid #ffffff;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    position: absolute;
    left: 24px;
    top: -9px;
}
#nav ul li:hover ul.sub-menu {
	display: block;
}
#nav ul li ul.sub-menu li {
	float: none;
	padding: 0;
}
#nav ul li ul.sub-menu li:first-child {
	border-top: none;
}
#nav ul li ul.sub-menu li a {
	font-size: 14px;
	color: #3a3a3a;
	border-radius: 0;
	text-transform: capitalize;
	padding: 6px 3px;
}
#nav ul li:hover ul.sub-menu li a {
	background: none;
}
#nav ul li ul.sub-menu li a:hover,
#nav ul li ul.sub-menu li.active a {
	color: #ef3e36;
	background: none;
}

/******* Media Queries *******/
@media (max-width: 1366px) {
	html, body {
		height: 100%;
	}
	html.open-menu body {
		overflow: hidden;
	}
	
	#nav ul li ul.sub-menu li {
		border-top: 1px solid #5a607c;
		border-bottom: none;
	}
	#nav ul li ul.sub-menu li a {
		color: #fff;
		padding: 9px 3px;
	}
	#nav ul li ul.sub-menu li a:hover, #nav ul li ul.sub-menu li.active a {
		color: #fff;
	}
	
	
	/* Responsive Nav */
	html.open-menu a#toggle {
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
	background: black;
	}
	 html.open-menu #wrapper {
		transform: translateX(250px);
		-webkit-transform: translateX(250px);
	}
	#wrapper {
		transition: all 0.3s ease-out 0s;
		-webkit-transition: all 0.3s ease-out 0s;
		height: 100%;
	}
	a#toggle { display: block; }
	#nav {
	  position: fixed;
	  width: 250px;
	  height: 100%;
	  max-height: 100%;
	  top: 0;
	  overflow: hidden;
	  overflow-y: auto;
	  background-color: #20222B;
	  transform: translateX(-250px);
	  -webkit-transform: translateX(-250px);
	  box-shadow: -1px -4px 5px rgba(0, 0, 0, 0.5) inset;
	  -webkit-box-shadow: -1px -4px 5px rgba(0, 0, 0, 0.5) inset;
	  margin: 0;
	  left: 0;
	  transition: all 0.3s ease-out 0s;
	  -webkit-transition: all 0.3s ease-out 0s;
	  z-index: -5;
	}
	#nav ul {
	  text-align: left;
	  background-color: transparent;
	}
	#nav ul li:first-child {
		border-top: none;
	}
	#nav ul li { display: block; width: 100%; margin: 0; padding: 0; border-top: 1px solid #5A607C; }
	#nav ul li a { display: block; color: #FFF; border-radius: 0; padding: 13px 10px; }
	#nav ul li a span { float: right; }
	#nav ul li ul.sub-menu {
	  position: static;
	  width: auto;
	  background: none;
	  border-radius: 0;
	  box-shadow: none;
	}
	#nav ul li:hover ul.sub-menu {
		display: none;
	}
	#nav ul li ul:before,
	#nav ul li ul:after {
		display: none;
	}
	#nav ul li:hover a span { 
		transform: rotateZ(0); 
		-webkit-transform: rotateZ(0); 
	}
	#nav ul li.open a {  }
	#nav ul li.open span { 
		/*transform: rotateZ(90deg); 
		border-left: none; 
		border-bottom: 1px solid #5a607c; */
		background: url("../images/caret_open.png") center center no-repeat;
	}
	#nav ul li.open ul.sub-menu { display: block; background: #4D5166; animation-duration: 0s !important; }
	#nav ul li a:hover, #nav ul li.active a, #nav ul li.quote a {
		background: none;
		color: #FFF;
	}
	#nav ul li span {  
		background: url("../images/caret_arrow.png") center center no-repeat;
		display: block;
        color: white;
		height: 11px;
		margin: 0;
		padding: 16px 17px;
		position: absolute;
		right: 0;
		top: 0;
		width: 7px;
		cursor: pointer;
		border-left: 1px solid #5a607c;
		z-index: 3;
	}
	#nav ul li:hover a {
		background: none;
		color: #fff;
	}
	html.open-menu { overflow: hidden; max-height: 100%; max-width: 100%; }
	html.open-menu div#overlay {
	  visibility: visible;
	  opacity: 1;
	  width: calc(-150%);
	  left: 250px;
	}
	html.open-menu nav#nav {
	  z-index: 5; 
	}
	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="wrapper">
<a id="toggle" href="javascript:void(0)"><span class="fa fa-bars"></span></a>
<nav id="nav">
	<ul>
		<li><a href="index">home</a></li>
		<li><a href="what_we_do">what we do</a>
			<ul class="sub-menu">
				<li><a href="#">submenu item</a></li>
				<li><a href="#">submenu item</a></li>
			</ul>
		</li>
		<li><a href="about">about us</a>
			<ul class="sub-menu">
				<li><a href="#">submenu item</a></li>
				<li><a href="#">submenu item</a></li>
			</ul>
		</li>
	</ul>
</nav>
</div>
1
投票

这里使用以下代码：

$('span.fa-caret-right').on('click',function(){
    // remove existing open class on li
    $('li').removeClass('open');
    // add class on current element(li)
    $(this).closest('li').toggleClass('open');
});

DEMO

0
投票

这是工作小提琴 - https://jsfiddle.net/464dzhno/4/

$('nav#nav li:has(ul)').toggleClass('open');

被替换为

$(this).closest('li:has(ul)').toggleClass('open');

您只需为孩子是您正在处理的范围点击的li来切换open类。

0
投票

将您的点击功能span.fa-caret-right更改为

$('span.fa-caret-right').on('click',function(){
  $('nav#nav li:has(ul)').removeClass('open');
  $(this).parent().addClass('open');
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.