Question

这是合拢并且以其默认性质工作。当用户单击“否”时，它将关闭。当用户单击“是”时，它会打开和关闭。

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

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

单击label时会调用click事件，因此我在每个标签上添加了id，如下所示。

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

在该功能中，您检查按下的按钮，如果是或否，则执行其应做的事情。

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>

Answer 2

您也可以尝试使用两个独立的类，例如 .btn-active1 和 .btn-active2

还删除了data-target =“ toggle”

jQuery('.btn-active1').click(function(e) {
  jQuery('.collapse').collapse('show');
});
jQuery('.btn-active2').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" data-toggle="buttons">
        <label class="btn btn-primary w-100 active  btn-active1" data-toggle="" data-target="#expolicy">
          <input type="radio" name="options" id="option1" autocomplete="off"> Yes
        </label>
        <label class="btn btn-primary w-100  btn-active2">
          <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 3

您需要从标签“是”中删除data-toggle和data-target，因为这将从引导程序中删除控件。为相应的单选按钮放置value =“ Yes”和value =“ No”，并为标签绑定单击处理程序。根据单选按钮的值，您可以显示或隐藏可折叠的div

jQuery(document).ready(function(){
 jQuery('label.w-100').click(function(e) {
   var value = $(this).find('input[type=radio][name=options]').val();
   if(value=='Yes') {
     jQuery('#expolicy').collapse('show');
   } else {
     jQuery('#expolicy').collapse('hide');
   }
  });
});

JSFiddle Demo

单击两次禁用折叠

3 个答案: