Question

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

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

我遇到的问题是检测点击哪个UL LI A，然后根据该结果做某事（使用$ this）。我可以获得第一个正确运行的深度级别，即第一个UL LI A点击打开第一个子类UL，类别.c（C = Child），但不是下一个深度级别，即第二个UL LI A不会使用.sc（SC = Sub Child）打开第二个子子UL。

Here is a fiddle.

这是实例：

!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>

我尝试过的事情：

匿名函数
使用：not运算符引用$（this），即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％确定预期的行为是什么

的 DEMO

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);

导航ul li一个被点击的检测并做某事

2 个答案: