动画项目，而其他具有类 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的真实部分。

您需要在 .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>