javascript - 动画项目，而其他项目具有 JQuery 类

Question

在此代码片段中，当菜单项具有事件类时，我尝试对菜单项的绝对元素进行更改，但问题是当该类切换并从当前项中删除时，该元素仍然具有相同的效果并且没有输入else语句。

正如您看到的，当单击任何一个菜单项时，类事件在菜单项之间切换，如果该项目具有事件类，我会为元素执行此操作。否则回来。但 else 语句不起作用，并将该行保留在菜单项下，尽管它不再具有事件类。

$(function () {
  "use strict";
  var $menuItem = $('.nav li a'),
      $hr = $('hr');
  $menuItem.on('click', function (event) {
      $('.active').not($(this)).removeClass('active');
      $(this).addClass('active');
      if ($(this).hasClass('active')) {
        $(this).next($hr).animate({width : "100%"}, 200);
      } else {
        $(this).next($hr).animate({width : "0"}, 200);
      }
      event.stopPropagation();
    });
  
  });

.nav {
  background-color:#222;
  padding:15px 10px;
  position:fixed;
  top:0;
  left:0;
  width:100%;
}
.nav ul li {
  display:inline;
  margin:0 20px;
  position:relative;
}
.nav ul li a {
  text-decoration:none;
  color:#fff;
  
}
.nav ul li a .active {
  color:red;
}
#home,#about,#services,#contact {
  height:600px;
}
h1 {
  text-align:center;
  font-size:30px;
  padding:100px 0;
}
hr {
  position:absolute;
  width: 0;
	height:2px;
	border:none;
    color: #ff0075;
	background-color:#ff0075;
    top: 10px;
    left: 0;
	z-index:-5;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
    <ul>
        <li><a href="#home">Home</a><hr></li>
        <li><a href="#about">About</a><hr></li>
        <li><a href="#services">Services</a><hr></li>
        <li><a href="#contact">Contact</a><hr></li>
    </ul>
</div>

Answer 1

由于您已将 active 类添加到当前元素，因此 if 的 true 部分将执行。

您需要在 .filter() 上应用动画ed 元素。

$menuItem.filter('.active').next('hr').animate({
  width: "100%"
}, 200);
$menuItem.filter(':not(.active)').next('hr').animate({
  width: "0"
}, 200);

$(function() {
  "use strict";
  var $menuItem = $('.nav li a');
  $menuItem.on('click', function(event) {
    $('.active').not($(this)).removeClass('active');
    $(this).addClass('active');

    $menuItem.filter('.active').next('hr').animate({
      width: "100%"
    }, 200);
    $menuItem.filter(':not(.active)').next('hr').animate({
      width: "0"
    }, 200);
    event.stopPropagation();
  });
});

.nav {
  background-color: #222;
  padding: 15px 10px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.nav ul li {
  display: inline;
  margin: 0 20px;
  position: relative;
}

.nav ul li a {
  text-decoration: none;
  color: #fff;
}

.nav ul li a .active {
  color: red;
}

#home,
#about,
#services,
#contact {
  height: 600px;
}

h1 {
  text-align: center;
  font-size: 30px;
  padding: 100px 0;
}

hr {
  position: absolute;
  width: 0;
  height: 2px;
  border: none;
  color: #ff0075;
  background-color: #ff0075;
  top: 10px;
  left: 0;
  z-index: -5;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li><a href="#home">Home</a>
      <hr>
    </li>
    <li><a href="#about">About</a>
      <hr>
    </li>
    <li><a href="#services">Services</a>
      <hr>
    </li>
    <li><a href="#contact">Contact</a>
      <hr>
    </li>
  </ul>
</div>