Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

有了这个Iam能够从隐藏中获得一个div。但是每当我点击滑块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>

使用Jquery显示一个类Over按钮

1 个答案: