主页 / 问题 / 978081
Accepted
ink Shio
Asked:2020-05-05 04:44:42 +0000 UTC2020-05-05 04:44:42 +0000 UTC

单击按钮时打开/关闭内容。如何？

  • 772

我制作了一个打开和关闭内容的按钮。我也这样做了，如果没有点击内容，内容块就会关闭。但问题是，如果点击在内容块之外，则通过关闭，“打开/关闭”按钮将停止关闭。我不明白问题是什么。

这里的例子：codepen

$(function() {
  var $togglers = $(".js-deps-popup");

  return $togglers.on("click", function() {
    var $this = $(this),
      $item = $this.next(".dep"),
      $active = $(".dep_show");

    $item.toggleClass("dep_show");
    return $active.removeClass("dep_show");
  });
});

$(function() {
  $(document).mouseup(function(e) {
    var $togglersPopup = $(".dep__popup");
    if (
      !$togglersPopup.is(e.target) &&
      $togglersPopup.has(e.target).length === 0
    ) {
      $(".dep").removeClass("dep_show");
    }
  });
});
body {
  font-size: 11px;
}

.deps__list {
  display: flex;
}
.deps__item {
  border: 1px solid;
  padding: 20px;
}

.dep__popup {
  display: none;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid;
}
.dep_show .dep__popup {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="deps__list">
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 1</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 2</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 4</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 4</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    $(function() {
  var $togglers = $(".js-deps-popup");

  return $togglers.on("click", function(e) {
    var $this = $(this),
      $item = $this.next(".dep"),
      $active = $(".dep_show");

    $item.toggleClass("dep_show");
    $active.removeClass("dep_show");
    e.stopPropagation();
  });
});

$(function() {
  $(document).click(function(e) {
    var $togglersPopup = $(".dep__popup");
    if (!$togglersPopup.is(e.target) &&
      $togglersPopup.has(e.target).length === 0
    ) {
      $(".dep").removeClass("dep_show");
    }
  });
});
    body {
  font-size: 11px;
}

.deps__list {
  display: flex;
}

.deps__item {
  border: 1px solid;
  padding: 20px;
}

.dep__popup {
  display: none;
  padding: 10px;
  background: #f5f5f5;
  border: 1px solid;
}

.dep_show .dep__popup {
  display: block;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="deps__list">
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 1</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 2</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 4</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="deps__item">
    <button class="deps__menu js-deps-popup">
      <div class="additional-tool">открыть/закрыть блок</div>
    </button>
    <div class="dep">
      <div class="dep__content">
        <div class="dep__title"><span>block 4</span></div>
      </div>
      <div class="dep__popup">
        <ul>
          <li><a href="#">txt 1</a></li>
          <li><a href="#">txt 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

    • 0

相关问题