动画项目，而其他项目有 class JQuery

Question

在此代码片段中，我试图在菜单项处于活动状态 class 时对其绝对元素进行更改，但问题是当 class 切换并从当前项目中删除时元素还是一样的效果，没有进入else语句。

如您所见，class 活动在单击其中任何一个菜单项时在菜单项之间切换，如果此项目具有 class 活动，我将对元素执行此操作。否则回来。但 else 语句不起作用并保留菜单项下的行，尽管它不再具有活动 class。

$(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 class 添加到当前元素，因此 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>

动画项目，而其他项目有 class JQuery

animate item while other has class JQuery

javascript

jquery

toggle