javascript - 使用 Jquery 在按钮单击上显示类

Question

我想在按钮点击时显示一个 div，然后它应该在另一个按钮点击时关闭。 现在我可以在隐藏和显示 div 之间切换。但相反，我希望它不切换，而是保留在那里，直到我单击关闭按钮。我是 J Query 的新手。有人可以帮忙吗

$('.trigger, .slider').click(function() {
  $('.slider').toggleClass('close');
});

.slider {
  position: absolute;
  width: 1000px;
  height: 100vh;
  margin-top: -304px;
  overflow: hidden;
  background-color: aliceblue;
  transition: all 1s;
}

.slider.close {
  top: 100vh;
  height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-for-table slider close">
  <div id="home">
    <div class="container-fluid">
      <table class="table table-striped table-hover">
        <tr>
          <td class="field-label col-xs-3 active" style="width: 20%;">
            <label>College</label>
          </td>
          <td class="col-md-3 oc pic">
            Value 1
          </td>
          <td class="col-md-3 oc pic">
            Value 2
          </td>
          <td class="col-md-3 oc pic">
            Value 3
          </td>
          <td class="col-md-3 oc pic">
            Value 4
          </td>
        </tr>
        <tr>
          <td class="field-label col-xs-3 active">
            <label>Location</label>
          </td>
          <td class="col-md-3 oc">
            Value 1
          </td>
          <td class="col-md-3 oc">
            Value 2
          </td>
          <td class="col-md-3 oc">
            Value 3
          </td>
          <td class="col-md-3 oc">
            Value 4
          </td>
        </tr>
      </table>

    </div>
  </div>

</div>

有了这个，我能够从隐藏中调出一个 div。但是每当我点击 slider div 的任何部分时，它都会由于 toggleClass 而关闭 我只想显示 div 并让它保留在那里，直到我单击关闭按钮 提前致谢。

Answer 1

无需使用 toggle，只需为每个不同的按钮设置不同的事件处理程序即可。

每个按钮都有不同的特定操作，因此它们只需要添加一个类或删除一个类。

$('.trigger.open').on('click', function() {
    $('.slider').removeClass('close');
});
$('.trigger.close').on('click', function() {
    $('.slider').addClass('close');
});

此外，您还需要为不同的按钮设置适当的类，以便 JS 代码能够正确选择它们。

<button type="button" class="trigger open">Click to open</button>
<button type="button" class="trigger close">Click to close</button>