Javascript 单击主体时淡入淡出切换_Javascript_Jquery_Html

Javascript 单击主体时淡入淡出切换

javascript jquery html

Javascript 单击主体时淡入淡出切换,javascript,jquery,html,Javascript,Jquery,Html,我有一个div，它通过点击id#cart来显示/隐藏display:none/block。通过单击id为的元素打开和关闭div，但我也想在单击主体时关闭div。请问我怎么做我使用的代码如下： jQuery("#cart").on("click", function() { jQuery(".shopping-cart").fadeToggle( "fast"); }); 您可以做的是在整个窗口中添加一个侦听器并检查是否有单击。当点击时，我们检查哪个元素被点击，并检查它是否是元素。我们

我有一个div，它通过点击id

#cart

来显示/隐藏display:none/block。通过单击id为的元素打开和关闭div，但我也想在单击主体时关闭div。请问我怎么做

我使用的代码如下：

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

您可以做的是在整个窗口中添加一个侦听器并检查是否有单击。当点击时，我们检查哪个元素被点击，并检查它是否是元素。我们对父元素也重复这个步骤

<!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>


功能检查ClickOutsite元素（clickedElement，elementToCheck）{
变量迭代器=clickedElement；
while（true）{
//单击在元素中。
if（迭代器===elementToCheck）
返回；
//去找父母。
如果（！iterator.parentElement）{
警报（“外部菜单”）；
返回；
}
迭代器=迭代器.parentElement；
}
}
window.addEventListener（'click'，函数（事件）{
选中ClickOutsiteElement（event.target，document.getElementById（'menu'））；
});

我有一个div，通过单击显示/隐藏display:none/block 在一辆id车上。通过单击元素打开和关闭div id，但我也要在body click上关闭div

在vanilla javascript中，您可以：

编写一个函数来显示/隐藏div
将单击事件侦听器添加到购物车
将单击事件侦听器添加到
```
body
```

工作示例：

//抓车
const cart=document.getElementById（'cart'）；
//抓住，我的div
const myDiv=document.getElementsByClassName（'div'）[0]；
//用于切换.myDiv的函数
const toggleMyDiv=（e）=>{
如果（e.target==e.currentTarget）{
myDiv.dataset.display=（myDiv.dataset.display=='show'）？'hide'：'show'；
}
}
//将单击事件侦听器添加到#购物车
cart.addEventListener（'click'，toggleMyDiv，false）；
document.body.addEventListener（'click'，toggleMyDiv，false）
body，
#推车{
光标：指针；
}
div{
显示：内联块；
宽度：100px；
高度：100px；
线高：100px；
文本对齐：居中；
字体大小：粗体；
}
#推车{
颜色：rgb（255、255、255）；
背景色：rgb（255,0,0）；
}
.分区{
颜色：rgb（255,0,0）；
背景色：rgb（255，255，0）；
}
.div[数据显示=“显示”]{
不透明度：1；
}
.div[数据显示=“隐藏”]{
不透明度：0；
}
购物车
myDiv
您可能需要两个独立的函数，因为您的购物车按钮应该双向切换，但body click处理程序应该只切换为out
Protip:on（）
没有为您做任何click（）
不会做的事情，您使用它的方式。后者稍微干净一点
jQuery("#cart").click(function() {
    jQuery(".shopping-cart").fadeToggle("fast");
});

jQuery("body").click(function() {
    jQuery(".shopping-cart").fadeOut("fast");
});

Protip 2：轻松安全地将jQuery
别名为$
，如下所示：
jQuery(function($) { // document ready with dollar alias
    $("#cart").click(function() {
    ...
});

jQuery(function($) { // document ready with dollar alias
    $("#cart").click(function() {
    ...
});