时间戳

首页 > 解决方案 > fadeToggle 身体点击

javascript - fadeToggle 身体点击

问题描述

我有这个 divdisplay:none/block通过单击 id显示/隐藏#cart。div 通过单击带有 id 的元素打开和关闭，但我也想在 body click 上关闭 div。请问我该怎么做？

我正在使用的代码如下：

jQuery("#cart").on("click", function() {
    jQuery(".shopping-cart").fadeToggle( "fast");
});

标签： javascriptjqueryhtml

解决方案

您可以做的是向整个窗口添加一个侦听器并检查点击。当有点击时，我们检查哪个元素被点击并检查它是否是元素。我们也对父元素重复此操作。

<!DOCTYPE html>
<html>
    <head>
        <script>
            function checkClickOutsiteElement(clickedElement, elementToCheck){
                var iterator = clickedElement;
                while(true){

                    // The click was in the element.
                    if( iterator === elementToCheck )
                        return;

                    // Go to the parent.
                    if( !iterator.parentElement ){
                        alert('outside menu');
                        return;
                    }

                    iterator = iterator.parentElement;
                }
            }

            window.addEventListener('click', function(event){
                checkClickOutsiteElement(event.target, document.getElementById('menu'));
            });
        </script>
    </head>
    <body>
        <div class="wrapper">
            <div id="menu" style="width: 100px; height: 100px; background-color: red;"></div>
        </div>
        <div class="wrapper">
            <div id="not_menu" style="width: 100px; height: 100px; background-color: green;"></div>
        </div>
    </body>
</html>

推荐阅读