Как закрыть блок кликом вне блока?

Question

[debian_Lenovo-B50-30]

Есть такая вот панелька

<?php

use core\Db;
use core\ErrorHandler;
use core\Helper;

if (ErrorHandler::$switch): ?>
    <div class="fixed-bottom bg-light text-dark p-1 border">
        <b>Сервер:</b> <?= apache_get_version() ?>
        |
        <b>PHP:</b> <?= phpversion() ?>
        |
        <b>Память:</b> <?= Helper::convertMemory(memory_get_usage()) ?>
        |
        <b>Генерация</b> <?= round(microtime(true) - $_SERVER['REQUEST_TIME_FLOAT'], 3) ?> сек
        |
        <b>MySQL:</b> <?= Db::getServerVersion() ?>
        |
        <b>Подключений:</b> <?= Db::$count_instances ?>
        |
        <b>Запросов:</b> <?= Db::$count_sql ?>
        <?php if (Db::$count_sql): ?>
            - <a href="#tools" data-toggle="collapse">Посмотреть запросы</a>
            <ol class="collapse mb-0" id="tools">
                <?php foreach (Db::$queries as $query): ?>
                    <li><span class="text-danger"><?= $query ?></span></li>
                <?php endforeach; ?>
            </ol>
        <?php endif; ?>
    </div>
<?php endif; ?>

Закрыта-Открыта

Панелька прикреплена внизу окна и при наличии запросов появляется ссылка [Посмотреть запросы], при нажатии на неё панелька раздвигается вверх, при повторном нажатии задвигается вниз в исходное состояние.

Возникла навязчивая идея после раскрытия панели закрывать её кликом в произвольное место окна, чтобы не целиться в ссылку для закрытия, как сделать?

Answer 1

[Danny Arty]

Сделал на примере popup.style.display = 'none';

const popup = document.querySelector('#tools');

document.onclick = function(e){
    if ( event.target.id!= 'tools' ) {
        popup.style.display = 'none';
    };
};

Comments

[debian_Lenovo-B50-30]

не открывается панель :(

event на e исправил

[Danny Arty]

debian_Lenovo-B50-30, нужно посмотреть какие стили меняются при открытии. И вместо popup.style.display = 'none'; поставить нужное.

[debian_Lenovo-B50-30]

Danny Arty, это bootstrap, открытый блок - это shown.bs.collapse, закрытие - .collapse('hide'), но я не очень шарю в js, пробовал так делать

$(document).on('click', 'shown.bs.collapse', function () {
    $(this).collapse('hide');
});

но знаю, что косячу)))

[Danny Arty]

debian_Lenovo-B50-30, обычно в boostrap class="collapse" - это скрытое содержимое, а class="collapse in" - это открытое.

У вас получается, когда содержимое скрыто, у блока с id=tools класс .collapse.hide, а с открытым содержимым shown.bs.collapse?

[debian_Lenovo-B50-30]

Danny Arty, всё, я понял суть, нужно повесить клик на документ и выполнить hide по селектору

$(document).on('click', function () {
    $('#tools').collapse('hide');
});

спс, что уделили внимание

[Danny Arty]

debian_Lenovo-B50-30,
да не за что