引導程序崩潰，行為錯誤

Question

我的問題是我有2個模態塊，當我單擊.emailInbound復選框時，它會切換.in-serv-container打開，但是當我單擊.accordion-heading打開注釋部分時，它會使.in-serv-container collapse 。 可能是什么原因？

HTML：

    <label class="checkbox">
        <input class="emailInbound" type="checkbox" onclick="toggleInServ(this)">Использовать Email для регистрации обращений
    </label>
    <div id='in-serv-container'>
        <div><strong>Настройка входящей почты</strong></div>
        <div>
            <input class="emailOutserver" type="text" placeholder="Сервер входящей почты">
            <input class="emailOutserverPort" type="text" placeholder="Порт">
        </div>
        <div>
            <select class="emailOutProtocol half" style="width: 49%!important;">
                <option value='usual'>Обычный</option>
                <option value='ssl'>SSL</option>
            </select>
            <input class="emailInFolder half" type="text" placeholder="Папка входящей почты">
        </div>
        <div class="modal-body-container">
            <input type="text" placeholder="Опции">
        </div>
        <button class="btn btn-link">Проверить подключение</button>
        <hr>
    </div>
    <div class="accordion" id="comment-wrapper">
        <div class="accordion-heading" data-toggle='collapse' data-target='#emailComment' onclick='toggleChevron(this)'>
            <strong>Комментарий</strong> <i class='icon-chevron-right'></i>
        </div>
        <div id="emailComment" class="collapse" data-parent="#comment-wrapper">
            <textarea class="emailComment"></textarea>
        </div>
    </div>

JS：

function toggleInServ(box){
    var checked = $(box).prop('checked');
    if(checked){
        $('#in-serv-container').css('height', '170px');
    }else{
        $('#in-serv-container').css('height', '0px');
    }
}

function toggleChevron(o){

    var icon = $(o).children('[class*=icon]');

    if(icon.hasClass('icon-chevron-right')){
        icon.removeClass('icon-chevron-right');
        icon.addClass('icon-chevron-down');
    }else{
        icon.removeClass('icon-chevron-down');
        icon.addClass('icon-chevron-right');
    }
}

Answer 1

如果我處於正確的位置，那么您是否希望每個復選框都保持打開狀態（如果選中此復選框）？ 無論發生什么情況，請也向我們提供您的CSS樣式。 如果您願意，請給我們JSFiddle 。

只是改變

height

CSS的屬性似乎是個壞主意。 相反，您可以嘗試使用

display: block;

和

display: none;

因此，在選擇之前，它實際上是一個隱藏字段。 不是問題本身的答案，而只是一些注意事項。

Answer 2

這是因為“冒泡”。 我添加了e.stopPropoganation()及其幫助。