jQuery根据单击的菜单项添加或删除类

Question

我试过这个，在StackOverflow上搜索。

$(".sub>li>a").click(function(e) {
    if( $(this).hasClass("open") ) {
        $(this).removeClass("open").addClass("closed");
    } else {
        // if other menus are open remove open class and add closed
        $(this).siblings().removeClass("open").addClass("closed"); 
        $(this).removeClass("closed").addClass("open");
    }
});

但它不起作用。

这是我的小提琴。 https://jsfiddle.net/v2oLfcnf/

Answer 1

Maker肯定包含了jQuery。

var study1= 0;
$("#info").click(function(){
	study1++;
		if(study1%2==1){
			$(".one").fadeIn('fast');
			
			
		}else{
			$(".one").fadeOut();
			$(".two").fadeOut();
			$(".three").fadeOut();
			$(".four").fadeOut();
		}
	});	
  
  var study= 0;
$("#study").click(function(){
	study++;
		if(study%2==1){
			$(".two").fadeIn('fast');
			
		}else{
			$(".one").fadeOut();
			$(".two").fadeOut();
			$(".three").fadeOut();
			$(".four").fadeOut();
		}
	});
  
  $(".sub>li>a").click(function(e) {

    if( $(this).hasClass("open") ) {
        $(this).removeClass("open").addClass("closed");
    } else {
        // if other menus are open remove open class and add closed
        $(this).siblings().removeClass("open").addClass("closed"); 
        $(this).removeClass("closed").addClass("open");
    }
});

	a{
			text-decoration: none;
			color: white;
		}
		a:hover{
			color: #D8B490;
		}
		
		li{
			text-decoration: none;
			list-style: none;
		
		}
    .sub{
	position: relative;

	top: 20%;
}
#info,#study,#edu,#sup{
			display: inline-block;z-index: 5;
			position: relative;
		
			margin: 2%;
			
		}
		#top{
		z-index: 80;
		background:#D8B490;
		width: 100%;}
.menu{
		position: absolute;
		top:5%;
		 background: /*#69341C;*/ #302F42;
		 color: white;
		 height: 100px;
		 z-index:55;
		width: 100%;
		 }
.sub{
	display: inline-block;
	
}


/*hide menu, if clicked .sub>li>a , fadeIn() below*/
		.one{
	
			width: 50%;
			height: 20%;
			display: block;
			background: white;
			position: absolute;
			left: 40%;
			top: 88%;
			color: red;
			display: none;
		}

		.two{
		display: none;
				color: red;
			width: 50%;
			height: 20%;
			
			background: white;
			position: absolute;
			left: 40%;
			top: 88%;
			
		}
		
		.three{
			display: none;
				color: red;
			width: 50%;
			height: 20%;
			
			background: white;
			position: absolute;
			left: 40%;
			top: 88%;
		}
		.four{
			display: none;
			
			width: 50%;
			height: 20%;
				color: red;
			background: white;
			position: absolute;
			left: 40%;
			top: 88%;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="menu">
			<ul class="sub">
				<li>
					<a href="#" id="info"> infomation</a>
				</li>
					
			</ul>
			
			
			<ul class="one">
						<li>a</li>
						<li>b</li>
					</ul>
			
			
			
			<ul class="sub">
				<li>
					<a href="#" id="study"> study</a>
				
				</li>
					
			</ul>
			<ul class="two">
						<li>c</li>
						<li>d</li>
					</ul>
					
					
			<ul class="sub">
				<li>
					<a href="#" id="edu">edu</a>
				
				</li>
					
			</ul>
			<ul class="three">
						<li>e</li>
						<li>f</li>
					</ul>
			
			
			
			
			<ul class="sub">
				<li>
					<a href="#" id="sup">support</a>
				
				</li>
					
			</ul>
			
			<ul class="four">
						<li>g</li>
						<li>h</li>
					</ul>
		</div>

Answer 2

为什么不尝试拥有通用状态（已关闭），并且单击，切换类打开哪个更具体？我只是假设初始状态已经结束

<style>
    .closed {
        /*code*/
    }
    div.open {
        /*status when open*/
    }
</style>
<script>
    $(.closed).on('click', function(){
        this.toggleClass('open');
    }
</script>

我不是jQuery语法的专家，但这可能有效

编辑：

jQuery可能非常重要，请不要犹豫，看看现在在每个浏览器上实现的addEventListener

Answer 3

$语法不是内置的Javascript API。您必须在项目中使用jQuery才能使用它。

只需添加此行，其中包括项目中的jquery：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>

我用代码https://jsfiddle.net/v2oLfcnf/

更新了你的小提琴

Answer 4

你的小提琴没有用，因为它没有在任何地方包含jQuery的链接。我已经updated your fiddle，现在似乎工作了。 参见＆＃34;外部资源＆＃34;在小提琴窗口的左边。在那里添加一个jQuery的链接，i .E。：https://code.jquery.com/jquery-1.7.2.min.js

Answer 5

您可以使用解决方案https://jsfiddle.net/v2oLfcnf/8/

$('.sub > li > a').click(function(){
  $('.sublist').fadeOut();
  $(this).closest('ul.sub').next('ul.sublist').fadeIn();
});

a{
  text-decoration: none;
  color: white;
}
a:hover{
  color: #D8B490;
}

li{
  text-decoration: none;
  list-style: none;

}
.sub{
	position: relative;
	top: 20%;
}

#info,#study,#edu,#sup{
  display: inline-block;z-index: 5;
  position: relative;
  margin: 2%;
}

#top{
  z-index: 80;
  background:#D8B490;
  width: 100%;
}

.menu{
  position: absolute;
  top:5%;
  background: /*#69341C;*/ #302F42;
  color: white;
  height: 100px;
  z-index:55;
  width: 100%;
}
.sub{
  display: inline-block;
}


/*hide menu, if clicked .sub>li>a , fadeIn() below*/
.one{
  width: 50%;
  height: 20%;
  display: block;
  background: white;
  position: absolute;
  left: 40%;
  top: 88%;
  color: red;
  display: none;
}

.two{
  display: none;
  color: red;
  width: 50%;
  height: 20%;
  background: white;
  position: absolute;
  left: 40%;
  top: 88%;			
}
		
.three{
  display: none;
  color: red;
  width: 50%;
  height: 20%;
  background: white;
  position: absolute;
  left: 40%;
  top: 88%;
}

.four{
  display: none;
  width: 50%;
  height: 20%;
  color: red;
  background: white;
  position: absolute;
  left: 40%;
  top: 88%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="sub">
    <li>
      <a href="#" id="info"> infomation</a>
    </li>
  </ul>
	<ul class="one sublist">
    <li>a</li>
    <li>b</li>
  </ul>
	<ul class="sub">
    <li>
      <a href="#" id="study"> study</a>
    </li>
	</ul>
  <ul class="two sublist">
    <li>c</li>
    <li>d</li>
  </ul>
					
	<ul class="sub">
    <li>
      <a href="#" id="edu">edu</a>
    </li>			
  </ul>
  <ul class="three sublist">
    <li>e</li>
    <li>f</li>
  </ul>
	<ul class="sub">
    <li>
      <a href="#" id="sup">support</a>
    </li>
  </ul>
			
  <ul class="four sublist">
    <li>g</li>
    <li>h</li>
  </ul>
</div>

希望这会对你有所帮助。