仅在一个元素中应用函数

时间：2015-03-08 01:08:03

标签： jquery html css

我正在开发自己的投资组合。我想把我的项目放在一个菜单中，比如felipestoker.com

好吧，如果你点击工作，它就可以了。将在我的作品类别中显示一个菜单。当我点击某些类别时，会显示所有类别。 看看这张图片：

enter image description here

结果：

enter image description here

我该如何解决？

我的一段代码：

$(".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>

3 个答案:

答案 0 :(得分：1)

试试此代码

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

答案 1 :(得分：1)

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

$(".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

JSFIDDLE

答案 2 :(得分：1)

此刻，它看起来像

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

定位.workList中的所有ul。这就是为什么所有列表都要扩展的原因。尝试使事件更具体，与特定元素相关联，然后根据您的代码定位下一个ul。

如：

$(".worksList h2").click(function() {
  $(this).next("ul").slideDown();
  ...
});

要特定于每个h2标题，您需要能够指定＆＃34;每个＆＃34;标题也是如此。因此封装函数如下：

jQuery(document).ready(function ($) {
    $(".menu-title").each(function(i) {
        $(this).click(function (e) {
            e.preventDefault();
            $(this).next("ul").slideDown();
        });
    });
});

然后可能在某些时候，您也希望能够滑动该菜单。

更快捷的方法可能是使用slideToggle，如下所示：

jQuery(document).ready(function ($) {
    $(".menu-title").each(function() {
        $(this).click(function (e) {
            e.preventDefault();
               $(this).next("ul").slideToggle();
        });
    });
});

然后，您需要一些逻辑来添加/删除i图标的不同类。代码下方比较if点击菜单h2有一个fa-plus-square-o类图标，然后删除该类并添加fa-minus-square-o。如果不是，那么else fa-minus-square-o类将被移除并替换为fa-plus-square-o类。

if ($(this).find("i").hasClass("fa-plus-square-o")) {
               $(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
               } else {
                   $(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
               }

总而言之，代码如下：

jQuery(document).ready(function ($) {
    $(".menu-title").each(function() {
        $(this).click(function (e) {
            e.preventDefault();
            $(this).next("ul").slideToggle();
            if ($(this).find("i").hasClass("fa-plus-square-o")) {
              $(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
            } else {
               $(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
               }
        });
    });
});

jsFiddle to demo http://jsfiddle.net/63n4wyov/2/

相关问题
最新问题