单击添加类加上添加css规则

Question

我在使用点击时使用jquery从display none添加特定类加一个css规则时遇到问题。我有导航菜单，我想在点击时添加背景加一个三角形，然后在用户点击另一个导航链接时将其删除。

＆＃13;

＆＃13;

	$(".navigation").on("click", function() {
	  $(".navigation").removeClass("active");
	  $(this).addClass("active-bg");
	  if (!$(".navigation").hasClass(".triangle")) {
	    $(".triangle").css({
	      "display": "none"
	    });
	  } else if ($(".navigation").hasClass(".triangle")) {
	    $(".triangle").css({
	      "display": "block"
	    });
	  }
	});

＆＃13;

.navigation li {
  list-style: none;
  display: inline-block;
  margin-right: 22px;
  position: relative;
}

.navigation li:nth-child(3n) {
  margin-right: -22px;
}

.navigation li a {
  font-size: 22px;
  text-transform: uppercase;
  font-weight: normal;
  text-decoration: none;
  width: 383px;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  color: #000;
}

.active {
  background: red;
}

.navigation li .triangle {
  width: 25px;
  height: 0;
  display: none;
  padding-left: 2.5%;
  padding-top: 2.5%;
  overflow: hidden;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 99;
}

.navigation li .triangle:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -50px;
  margin-top: -50px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
  <li>
    <a href="javascript:;">Menu 1</a>
    <div class="triangle"></div>

  </li>
  <li>
    <a href="javascript:;">Menu 2</a>
    <div class="triangle"></div>
  </li>
  <li>
    <a href="javascript:;">Menu 3</a>
    <div class="triangle"></div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

以下是我的代码示例。 Jsfiddle

Answer 1

我已经清除了您的大部分代码，您只需要在点击的所有项目中删除.active类，并将其设置为新项目。显示.triangle元素还取决于父元素的.active类：

＆＃13;

＆＃13;

var $items = $('.navigation li');
$items.on('click', function(e) {
    $items.removeClass('active');
    $(e.target).closest('li').addClass('active');
});

＆＃13;

.navigation li {
  list-style: none;
  display: inline-block;
  margin-right: 22px;
  position: relative;
}

.navigation li:nth-child(3n) {
  margin-right: -22px;
}

.navigation li a {
  font-size: 22px;
  text-transform: uppercase;
  font-weight: normal;
  text-decoration: none;
  width: 383px;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  color: #000;
}

.active {
  background: red;
}

.navigation li .triangle {
  width: 25px;
  height: 0;
  display: none;
  padding-left: 2.5%;
  padding-top: 2.5%;
  overflow: hidden;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 99;
}

.navigation li.active .triangle {
  display: block;
}

.navigation li .triangle:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin-left: -50px;
  margin-top: -50px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
  <li>
    <a href="javascript:;">Menu 1</a>
    <div class="triangle"></div>
  </li>
  <li>
    <a href="javascript:;">Menu 2</a>
    <div class="triangle"></div>
  </li>
  <li>
    <a href="javascript:;">Menu 3</a>
    <div class="triangle"></div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;