javascript - 单击两次禁用折叠

Question

这是崩溃并以其默认性质工作。当用户单击“否”时，它会关闭。当用户单击"is"时，它会打开和关闭。

我想使其仅在用户单击“否”时关闭，仅在用户单击"is"时再次打开。如果用户再次单击"is"，它应该保持打开状态。

JSFiddle DEMO

jQuery('.btn-active').click(function(e) {
  jQuery('.collapse').collapse('hide');
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="btn-group btn-group-toggle d-flex btn-active " data-toggle="buttons">
        <label class="btn btn-primary w-100 active" data-toggle="collapse" data-target="#expolicy">
          <input type="radio" name="options" id="option1" autocomplete="off"> Yes
        </label>
        <label class="btn btn-primary w-100">
          <input type="radio" name="options" id="option2" autocomplete="off"> No
        </label>
      </div>
    </div>
    <div class="col-12">
      <div class="collapse show" id="expolicy">
        This is the collapse. It opens/closes when the user clicks "Yes". It should close only when the user clicks "No" and open only when the User clicks "Yes". It is open by default.
      </div>
    </div>
  </div>
</div>

Answer 1

当您单击标签时，将调用单击事件，因此我向每个标签添加了一个id，如下所示。

此外，我从 Yes 按钮中删除了 data-toggle，因为它总是在不需要您的函数的情况下切换折叠，这样，只需该函数控制切换。

在该函数中，您检查按下了哪个按钮，如果是或否，则执行它应该执行的操作。

jQuery('.btn-active').click(function(e) {  
  if (e.target.id == "showCollapse"){ 
    jQuery('.collapse').collapse('show');
  } else if (e.target.id == "hideCollapse"){
    jQuery('.collapse').collapse('hide');
  }
  
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="btn-group btn-group-toggle d-flex btn-active " data-toggle="buttons">
        <label class="btn btn-primary w-100 active" data-target="#expolicy" id="showCollapse">
          <input type="radio" name="options" id="option1" autocomplete="off"> Yes
        </label>
        <label class="btn btn-primary w-100" id="hideCollapse">
          <input type="radio" name="options" id="option2" autocomplete="off"> No
        </label>
      </div>
    </div>
    <div class="col-12">
      <div class="collapse show" id="expolicy">
        This is the collapse. It opens/closes when the user clicks "Yes". It should close only when the user clicks "No" and open only when the User clicks "Yes". It is open by default.
      </div>
    </div>
  </div>
</div>