Отключить сворачивание при нажатии дважды

Question

Это развал и работает по умолчанию. Он закрывается, когда пользователь нажимает «Нет». И он открывается и закрывается, когда пользователь нажимает «Да».

Я хочу сделать так, чтобы он закрывался только тогда, когда пользователь нажимал «Нет», и открывался снова только тогда, когда пользователь нажимал «Да». Если пользователь снова нажимает «Да», он должен оставаться открытым.

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

Вы также можете попробовать это, используя два отдельных класса, таких как .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 2

вам нужно удалить data-toggle и data-target с метки Да, так как это удалит управление из начальной загрузки. положить значение = "Да" и значение = "Нет" для соответствующего переключателя и обработчик привязки для ярлыков. на основе значения переключателя вы можете показать или скрыть разборный 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

Answer 3

Событие click вызывается при нажатии на label, поэтому я добавил 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>