Мое свертывание бутстрапа не переключается и закрывается правильно нажатием кнопки

Question

У меня есть две кнопки («х», «отмена») в обвале бутстрапа, который должен переключать и закрывать сбрасываемый. Первая кнопка, которая отображается как «х», отлично работает и закрывает сбрасываемый, но «отменить» не закрывает расширяемую область. Любые мысли о том, почему? Вот fiddle Я попытался настроить. Другая проблема заключается в том, что, когда «x» закрывает расширяемую область, я снова открываю ее, но нет бутстрапов. Есть идеи, почему это так?

$(document).on("click", "button.cancel-student-button", function() { 
 
    var collapse = $(this).closest("collapse"); 
 
    $(collapse).collapse('toggle'); 
 
});

<div class="collapse cborder" id=cancellation style="position:relative"> 
 
    <div class="unregster-student-well well" style="margin-bottom: 0; border: 1px solid yellowgreen;"> 
 
    <div class="unregister-student-alert alert alert-danger alert-dismissible fade in" role="alert"> 
 
     <button type="button" class="cancel-student-button close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> 
 
     </button> 
 
     <h4>Oh snap! You want to unregister as a student!</h4> 
 
     <p>Press the unregister button and you will be automatically unregistered from this YogaBandy event.</p> 
 
     <p> 
 
     <button type="button" class="btn btn-danger">Unregister</button> 
 
     <button type="button" class="cancel-student-button btn btn-default">Cancel</button> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

У вас есть несколько вещей, которые должны быть изменены:

1) Ваша цель данных не имеют скобки вокруг него: id=cancellation.

2) closest("collapse"); требует периода для обозначения класса

3) Вам не нужно button здесь>".cancel-student-button"

4) И удалить data-dismiss="alert".

$(document).on("click", ".cancel-student-button", function() { 
 
    var collapse = $(this).closest(".collapse"); 
 
    $(collapse).collapse('toggle'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<hr> 
 
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#cancellation" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button> 
 
<div class="collapse cborder" id="cancellation" style="position:relative"> 
 
    <div class="unregster-student-well well" style="margin-bottom: 0; border: 1px solid yellowgreen;"> 
 
    <div class="unregister-student-alert alert alert-danger alert-dismissible fade in" role="alert"> 
 
     <button type="button" class="cancel-student-button close" aria-label="Close"><span aria-hidden="true">×</span> 
 

 
     </button> 
 
     <h4>Oh snap! You want to unregister as a student!</h4> 
 

 
     <p>Press the unregister button and you will be automatically unregistered from this YogaBandy event.</p> 
 
     <p> 
 
     <button type="button" class="btn btn-danger">Unregister</button> 
 
     <button type="button" class="cancel-student-button btn btn-default">Cancel</button> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr>