Question

我有两个问题：

关于“检测到的” css类，如果在显示该元素的下拉内容的动画完成之前单击另一个列表元素，则会出现该元素的下拉内容，但是，错误的列表元素将突出显示。这是我尝试创建所谓的“活动”类以阐明要显示哪个列表元素的下拉内容的尝试。如何确保无论突出显示/选择了哪个列表元素，都会显示正确的下拉内容？
在页面的初始加载或刷新时，突出显示并显示列表元素及其下拉内容，尽管用户尚未选择它们。如何确保在加载页面后，单击列表元素之前，不会显示任何列表元素或其下拉内容？

谢谢。

$(function() {
	$('#nav .nav-ul li').on('click', function () {
  	//control selected nav li's css
  	var $detected = $(this).closest('.nav-ul');
    $detected.find('li.detected').removeClass('detected');
    $(this).addClass('detected');
        
  	//figure out which rel to show
    var ulToShow = $(this).attr('rel');
    
    //hide current rel
    $('.substitute .sub-child.active').hide(416, function() {
    	$(this).removeClass('active');
    	$('#'+ulToShow).fadeIn(528, function() {
      	$(this).addClass('active');
        
      
      });
    });
    
  });
});

* {
  margin: 0;
  padding: 0;
}
#nav {
  background-color: /*blue*/;
  float: right;
}
#nav .nav-ul {
  list-style: none;
  float: right;
  background-color: /*yellow*/;
  border-left: solid 2px #000000;
  border-right: solid 2px #000000;
  /*transform: skewX(-20deg);*/
}
#nav .nav-ul li {
  float: left;
  padding: 4px;
  /*transform: skewX(20deg);*/
  font-weight: bold;
  color: #000000;
}
#nav .nav-ul li:hover {
  cursor: pointer;
  text-decoration: underline;
  color: #E51D27;
}
#nav .nav-ul li.detected {
  color: #E51D27;
}

#nav .substitute {
  float: right;
  background-color: /*pink*/;
  margin-right: 4px;
}
#nav .substitute .sub-child {
  float: left;
  display: none;
}
#nav .substitute .sub-child.active {
  display: block;
}


#nav .substitute .sub-child ul {
  list-style: none;
}
#nav .substitute .sub-child ul li {
  float: left;
  padding: 4px;
}

<div id="nav">
  <ul class="nav-ul">
    <li class="detected" rel="pay1">Color</li>
    <li rel="pay2">Shape</li>
    <li rel="pay3">Size</li>
  </ul>
  <div class="substitute">
    <div id="pay1" class="sub-child active">
      <ul>
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
      </ul>
    </div>
    <div id="pay2" class="sub-child">
      <ul>
        <li>Square</li>
        <li>Circle</li>
        <li>Triangle</li>
        <li>Diamond</li>
      </ul>
    </div>
    <div id="pay3" class="sub-child">
      <ul>
        <li>Small</li>
        <li>Medium</li>
        <li>Large</li>
      </ul>
    </div>
  </div>
</div>

Answer 1

可能有很多方法可以做到这一点。我选择了JQuery方式，因为您已经在使用它。对于第一个问题，我只是在动画工作时删除了链接上的单击处理程序，然后在动画完成后将其添加回去。这样，动画运行时不会产生中间点击的影响。可能还有其他方法可以实现，但这就是我在运行动画时通常用来启用/禁用项目的概念。

对于第二个问题，我从初始DOM中删除了active和detected类，并添加了逻辑以检查是否没有活动，然后仅运行动画中的淡入淡出，否则运行淡入淡出。退出并淡入。

代码中有些重复，所以我建议创建函数并对其进行重构，但这应该可以给您带来启发。

似乎工作正常。在这里更新了小提琴：https://jsfiddle.net/bm7qoe3k/1/

希望这会有所帮助。

导航菜单JQuery问题

1 个答案: