导航ul li a检测被点击并执行某些操作

Question

我决定从头开始构建自己的导航。

我正在使用jquery-if/else来处理交互。

我遇到的问题是检测哪个UL LI A被点击，然后根据结果做一些事情(使用$this)。我可以让第一个深度级别正常工作，即点击第一个UL LI A打开class.c(c=child)的第一个子子UL，但不能打开该深度级别以下的下一个深度级别，即第二个UL LIA没有打开class.sc(sc=sub-child)的第二个子UL。

这是一把小提琴。

这是一个活生生的例子：

!function(n){
		$('ul li a + ul').prev('a').append('<span class=ai></span>');
		$('ul li a').on('click', function(n) {
		  if($('.c').css('display') == 'none') {
			  $this = $(this);
			  $(".c").slideToggle();
			  $this.find('span.ai').toggleClass('st');
			  n.preventDefault();
		  } else if($(this).is('ul li.p a')) {
			  $this = $(this);
			  $(".c").slideToggle();
			  $this.find('span.ai').toggleClass('st');
			  n.preventDefault();
		  } else if ($(this).is('ul li.sp a')) {
			  $this = $(this);
			  $(".sc").slideToggle();
			  $this.find('span.ai').toggleClass('st');
			  n.preventDefault();
		  }
		});
}(jQuery);

ul {
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
ul li {
line-height: 50px;
height: 50px;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
background: #c8c8c8;
text-align: center;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
align-items: center;
}
ul li a {
display: block;
}
ul li ul {
display: none;
}
ul li ul li {
text-align: left;
text-indent: 10px;
}
ul li ul li ul {
display: none;
}
ul span {
width: 0;
height: 0;
margin-left: 10px;
display: inline-block;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #000;
-moz-transition: -moz-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
vertical-align: middle;
}
ul span.st {
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div x-n>
		  <ul>
			<li><a href="#" title="Home">Home</a></li>
			<li class=p><a href="#" title="About us">About us</a>
				<ul class=c> 
					<li class=sp><a href="#" title="History">History</a>
						<ul class=sc>
							<li>Beginnings</li>
						</ul>
					</li>
					<li><a href="#" title="Our team">Our team</a>
					<li><a href="#" title="Our mission statement">Our mission statement</a>
				</ul>
			</li>
			<li><a href="#" title="Clients">Clients</a></li>
			<li><a href="#" title="Work">Work</a></li>
			<li><a href="#" title="Contact">Contact</a></li>
		  </ul>
</div>

我尝试过的东西：

• 匿名函数
• 在引用$(this)时使用：not运算符，即，else if($(this).is('ul li.p a:not(ul li.sp a)')
• 使用整数变量根据条件检测点击次数，然后执行操作

这里可能有一个非常简单的解决方案，但我没有看到。有什么想法吗？

Answer 1

似乎过于复杂。

像这样的东西应该工作

$('ul li a').on('click', function(e) {            
var $link=$(this), $submenu = $link.siblings('ul');
if($submenu.length){
e.preventDefault();
$link.find('span.ai').toggleClass('st');
$submenu.slideToggle()
}        
});

我不能100%确定的预期行为

演示

Answer 2

! function(n) {
$('ul li a + ul').prev('a').append('<span class=ai></span>');
$('.t').on('click', function(n) {
$('[x-n]').toggleClass("e");
n.preventDefault();
});
$('ul li a').on('click', function(n) {
if (!$(this).hasClass('st')) {
$(this).next().slideDown();
$(this).addClass('st');
$(this).find('span.ai').toggleClass('st');
} else {
$(this).next().slideUp();
$(this).removeClass('st');
$(this).find('span.ai').toggleClass('st');
}
});
}(jQuery);