Question

这是我有一个场景的例子：

<div id="portfolio">
  <a class="show-project" href="#">
    <!-- some content here -->
  </a>
  <div class="scrollable">
    <!-- full height container with scroll -->
  </div>
</div>

点击链接后，其他课程会添加到＆＃34;可滚动左移＆＃34;。我想检测它何时被添加并替换css＆＃34; overflow-y：auto;＆＃34;使用＆＃34;溢出-y：隐藏;＆＃34;

我试图通过以下方式实现这一目标：

<script>
  $(document).ready(function () {
    $("#portfolio .show-project").click(function(){
      if ($("#portfolio .scrollable").hasClass("move-left")) {
        $("#portfolio").css("overflow-y", "hidden");
      } else {
        $("#portfolio").css("overflow-y", "auto");
      }
    });
  });
</script>

你能告诉我如何解决这个问题吗？非常感谢！

Answer 1

您可以使用jQuery toggleClass和hasClass来切换元素上的类，并相应地更改overflow-y属性。

价：

在中添加或删除每个元素中的一个或多个类匹配元素的集合，取决于类的存在或者是state参数的值。

代码：

$(document).ready(function () {
    $("#portfolio .show-project").click(function () {
        $("#portfolio .scrollable").toggleClass('move-left');
        var overflow;
        ($("#portfolio .scrollable").hasClass("move-left")) ? overflow = 'hidden' : overflow = 'auto';
        $("#portfolio").css("overflow-y", overflow);
    });
});

演示：http://jsfiddle.net/IrvinDominin/n0d5jxe8/

jquery检测类并将div添加到div

1 个答案: