jquery - 仅在一个元素中应用函数

Question

我正在开发自己的作品集。我想把我的元素放在一个菜单中，像这样 felipestoker.com

好吧，如果您单击Works，它就可以正常工作。将出现一个菜单，其中包含我的作品类别。当我单击某些类别时，所有类别都会出现。 看这张图片:

结果:

我该如何解决？

我的一段代码:

$(".worksList h2").click(function() {
  $(".worksList ul").slideDown();
  $(".worksList i").removeClass("fa-plus-square-o");
  $(".worksList i").addClass("fa-minus-square-o");
});

#works {
  width: 300px;
  height: 100%;
  background: #474747;
  position: fixed;
  right: 0;
  top: 0;
  ;
  *display: none;
  */ z-index: 3;
  padding: 20px;
  box-sizing: border-box;
}
#works span {
  font: 700 23px/23px"Open Sans";
  text-transform: uppercase;
  color: white;
  text-align: left;
  display: inline-block;
}
.worksList h2 {
  font: 300 15px/30px"Open Sans";
  color: #d9cfcf;
  text-transform: uppercase;
  text-align: left;
}
.worksList h2:hover {
  color: white;
}
.worksList h3 {
  font: 700 15px/30px"Open Sans";
  color: #fff;
  text-transform: uppercase;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-none {
  float: none;
}
.display-block {
  display: block
}
.display-inline-block {
  display: inline-block;
}
.display-table-cell {
  display: table-cell;
}
.display-none {
  display: none;
}
/*BACKGROUND*/

.background-white {
  background: #fff
}
.background-gray47 {
  background: #474747
}

<div id="works">	<span class="worksClose cursor-pointer">X   Fechar</span>
  <span class="bar background-white margin-top-30 margin-bottom-30"></span>

  <div class="worksList">
    <!-- Séries -->
    <h2 class="text-align-center cursor-pointer">
		<i class="fa fa-plus-square-o"></i>
		Series
	</h2>
    <ul class="display-none">
      <li class="display-block grid_100p margin-top-10">
        <a class="display-inline-block" href="http://www.lilyhammer.com.br">
          <img class="float-left" src="./images/1.png" alt="Lilyhammer" title="Lilyhammer" width="30" height="30" />
          <h3 class="float-left margin-left-15">Lilyhammer</h3>
        </a>

      </li>
      <li class="display-block grid_100p margin-top-10">
        <a class="display-inline-block" href="http://www.punhodeferro.com.br">
          <img class="float-left" src="./images/1.png" alt="Punho de Ferro" title="Punho de Ferro" width="30" height="30" />
          <h3 class="float-left margin-left-15">Punho de Ferro</h3>
        </a>

      </li>
      <li class="display-block grid_100p margin-top-10">
        <a class="display-inline-block" href="http://www.westworld.com.br">
          <img class="float-left" src="./images/1.png" alt="West World" title="West World" width="30" height="30" />
          <h3 class="float-left margin-left-15">West World</h3>
        </a>
      </li>
    </ul>
    <!-- Menção Especial -->
    <h2 class="text-align-center cursor-pointer">
		<i class="fa fa-plus-square-o"></i>
		Special Mention
	</h2>
    <ul class="display-none">
      <li class="display-block grid_100p margin-top-10">
        <a class="display-inline-block" href="http://www.pulpfiction.com.br">
          <img class="float-left" src="./images/pulp.png" alt="Pulp Fiction Brasil" title="Pulp Fiction Brasil" width="30" height="30" />
          <h3 class="float-left margin-left-15">Pulp Fiction Brasil</h3>
        </a>

      </li>
    </ul>
  </div>
</div>

Answer 1

您可能需要 .each() 和 .eq() 来定位正确的clicked 元素，例如

$(".worksList h2").each(function (i) {
    $(this).click(function () {
        $(".worksList ul").slideUp().eq(i).slideDown();
        $(".worksList").find("i").removeClass("fa-plus-square-o").eq(i).addClass("fa-minus-square-o");
    });
});

注意 我添加了 .slideUp() 以便在选择新元素时关闭先前展开的元素。这可能需要一些清理

---

编辑:调整代码，以便您可以在每次点击时切换列表

jQuery(document).ready(function ($) {
    $(".worksList h2").each(function (i) {
        $(this).click(function (e) {
            e.preventDefault();
            var _this = $(this);
            var _parent = _this.parent(".worksList");
            var _sibling = _this.next("ul");
            if (_sibling.hasClass("expanded")) {
                _sibling.slideUp(function () {
                    _parent.find("i").addClass("fa-plus-square-o").removeClass("fa-minus-square-o");
                }).removeClass("expanded");
            } else {
                $(".worksList").find("ul").slideUp(function () {
                    $(".worksList").find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
                }).removeClass("expanded").eq(i).slideDown(function () {
                    _parent.find("i").eq(i).removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
                }).addClass("expanded");
            }
        })
    });
}); // ready