时间戳

首页 > 解决方案 > 导航菜单 JQuery 问题

javascript - 导航菜单 JQuery 问题

问题描述

我有两个问题：

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

谢谢你。

$(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>

标签： javascriptjqueryhtmlcss

解决方案

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

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

代码中有一些重复，所以我建议创建函数并重构它，但它应该会给你这个想法。

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

希望这可以帮助。

推荐阅读