Bootstrap 4 убирает коллапс при щелчке снаружи / другой переключатель

Question

В приведенном ниже примере, когда я нажимаю на другие, откроется div сворачивания. Если я хочу закрыть панель свертывания, я хочу нажать ту же кнопку-переключатель. Но Я хочу закрыть вход, когда я нажимаю снаружи, а также когда я выбираю другой переключатель.

$('body').click(function(){
  $(".collapse").removeClass('hide');
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio2" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio2">Household/Decoration Items</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio3" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio3">Food & Beverages</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio4" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio4">Beauty/Massage</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio5" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio5">Handphone & Accessories</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio" name="nonRadio" data-toggle="collapse" data-target="#nonRadio" class="custom-control-input">
  <label class="custom-control-label" for="nonRadio">Others</label>
</div>
<div id="nonRadio" class="frm-tgl collapse mt-1">
  <input type="text" id="" name="" class="form-control">
</div>

Answer 1

  
 $(document).ready(function(){
    $("#nonRadio").click(function(){
        // show hide paragraph on button click
        $("#other-input").toggle("slow", function(){
            // check paragraph once toggle effect is completed
            if($("#other-input").is(":hidden")){
               
               $("#other-input").removeClass('hidden')
               
            } else{
                $("#other-input").addClass('hidden')
             
            }
        });
    });
});

.hidden
{display:none}
.active-input{

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio2" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio2">Household/Decoration Items</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio3" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio3">Food & Beverages</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio4" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio4">Beauty/Massage</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio5" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio5">Handphone & Accessories</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio" name="nonRadio" data-toggle="collapse" data-target="#nonRadio" class="custom-control-input">
  <label class="custom-control-label" for="nonRadio">Others</label>
</div>
<div id="nonRadio" class="frm-tgl collapse mt-1">
  <input type="text" id="other-input" name="" class="hidden form-control">
</div>

Answer 2

Попробуй это. Получить атрибут имени переключателей, при нажатии «Другие» задайте условие, чтобы показать или скрыть нужный элемент при нажатии

$(function() {
    $('input[name="nonRadio"]').on('click', function() {
        if ($(this).val() == 'Others') {
            $('#textbox').show();
        }
        else {
            $('#textbox').hide();
        }
    });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio2" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio2">Household/Decoration Items</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio3" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio3">Food & Beverages</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio4" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio4">Beauty/Massage</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio5" name="nonRadio" class="custom-control-input shnlabel1">
  <label class="custom-control-label" for="nonRadio5">Handphone & Accessories</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="nonRadio" name="nonRadio" data-toggle="collapse" data-target="#nonRadio" class="custom-control-input" value="Others">
  <label class="custom-control-label" for="nonRadio">Others</label>
</div>
<div class="frm-tgl collapse mt-1" id="textbox">
  <input type="text" class="form-control">
</div>