Обнаружение щелчка вне элемента, проверка, установлен ли флажок, и запуск щелчка

#javascript #jquery #html #css #jquery-ui

#javascript #jquery #HTML #css #jquery-пользовательский интерфейс

Вопрос:

Вот мой HTML-код:

 <input class="menu-btn" type="checkbox" id="menu-btn" />

Вот мой код javascript:

 $(document).ready(function() {
    $(document).click(function(event) { //line 1
        if(!$(event.target).closest('#menu').length) { //line 2
            if($('.menu-btn').is(':checked')) { //line 3
                $('#menu-btn').trigger('click'); //line 4
            }
        }        
    })
})

Строка 1 работает, строка 2 работает, строка 3 не работает, и это также не позволяет мне установить флажок. почему это?

Редактировать: вот что я пытаюсь сделать:

строка 1 предназначена для определения наличия щелчка. строка 2 предназначена для определения, находится ли щелчок за пределами #menu, а строка 3 предназначена для проверки, снят ли флажок menu-btn. если флажок снят, то строка 4 вызовет щелчок меню-btn. проблема в том, что строка 3 не позволяет мне установить флажок, если он в данный момент не установлен.

Ответ №1:

вы можете использовать prop, чтобы установить флажок вместо того, чтобы запускать событие щелчка по нему, $('#menu-btn').prop('checked', 'checked'); и снять его с помощью $('#menu-btn').prop('checked', false);

Переключение кода:

 $(document).ready(function() {
    $(document).click(function(event) { //line 1
        if(!$(event.target).closest('#menu').length) { //line 2
            if(!$('#menu-btn').prop('checked')) { //line 3
                $('#menu-btn').prop('checked', 'checked'); //line 4
            } else {
                $('#menu-btn').prop('checked', false);
            }
        }        
    })
})

1. Да. если установлен флажок menu-btn, выполните console.log(«test»);. но это не позволяет мне это проверить

2. Измените .menu-btn на #menu-btn и проверьте обновленный ответ

3. Вы неправильно используете оператор. is(':checked') возвращает true, если флажок установлен, и false в противном случае. Перед ним должен быть ! оператор

Ответ №2:

Попробуйте этот код переключения:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(window).click(function() {
        $('#menu-btn').trigger('click');
    });
});
</script>
<input class="menu-btn" type="checkbox" id="menu-btn" />