jq点击元素之外关闭元素的共存问题

Posted 2020-10-08 流年之外

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq点击元素之外关闭元素的共存问题相关的知识，希望对你有一定的参考价值。

1.首先第一个想到的是阻止事件冒泡;

随便写的css;

.select-wrap, .select-wrap1{
            position: relative;
            width: 100px;
            border: 1px solid #000;
        }
        .select-wrap1{
            margin-top: 100px;
        }
       .select-list{
        display: none;
        position: absolute;
        border: 1px solid red;
        top: 100%;
        left: 0
       }

<div class="select-wrap">
    <div class="select-span">
        <span>选择一个</span>
    </div>
    <ul class="select-list">
        <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
    </ul>
</div>

<script>
    $(".select-wrap .select-span").click(function(e){
        e.stopPropagation();
        $(".select-wrap .select-list").slideToggle();
    });
    $(document).click(function(e) {
       $(‘.select-wrap‘).find(‘.select-list‘).slideUp();
    });

</script>

这样写当有一个的时候没什么问题,但是当有两个以上的时候有点问题

<div class="select-wrap">
    <div class="select-span">
        <span>选择一个</span>
    </div>
    <ul class="select-list">
        <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
    </ul>
</div>

<div class="select-wrap1">
    <div class="select-span">
        <span>选择一个</span>
    </div>
    <ul class="select-list">
        <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
    </ul>
</div>

<script>
    $(".select-wrap .select-span").click(function(e){
        e.stopPropagation();
        $(".select-wrap .select-list").slideToggle();
    });
    $(".select-wrap1 .select-span").click(function(e){
        e.stopPropagation();
        $(".select-wrap1 .select-list").slideToggle();
    });
    $(document).click(function(e) {
       $(‘.select-wrap‘).find(‘.select-list‘).slideUp();
       $(‘.select-wrap1‘).find(‘.select-list‘).slideUp();
    });

</script>

我们发现,点击第二个的时候,第一个应该是要关闭的,但是并没有(反之亦然),其实是点击了凡是阻止事件冒泡的元素,都不会关闭,

点击没有事件冒泡的地方才会关闭;

我是这样解决这个问题的,可能还有其他更好的解决方法

下面是完整代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .select-wrap, .select-wrap1{
            position: relative;
            width: 100px;
            border: 1px solid #000;
        }
        .select-wrap1{
            margin-top: 100px;
        }
       .select-list{
        display: none;
        position: absolute;
        border: 1px solid red;
        top: 100%;
        left: 0
       }
    </style>
</head>
<body>
<div class="select-wrap">
    <div class="select-span">
        <span>选择一个</span>
    </div>
    <ul class="select-list">
        <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
    </ul>
</div>

<div class="select-wrap1">
    <div class="select-span">
        <span>选择一个</span>
    </div>
    <ul class="select-list">
        <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
    </ul>
</div>
</body>
<script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(".select-wrap .select-span").click(function(){
        $(".select-wrap .select-list").slideToggle();
    });
    $(".select-wrap1 .select-span").click(function(){
        $(".select-wrap1 .select-list").slideToggle();
    });
    //
    $(".select-wrap .select-list li").on(‘click‘, function (e) {
        e.stopPropagation();
        $(this).parents(‘.select-wrap‘).find(‘span‘).html($(this).html());
        $(this).parents(‘.select-wrap‘).find(‘.select-list‘).slideUp();
        $(".select-wrap1 .select-list").slideDown(‘fast‘, ‘swing‘);
    })
    $(".select-wrap1 .select-list li").on(‘click‘, function (e) {
        e.stopPropagation();
        $(this).parents(‘.select-wrap1‘).find(‘span‘).html($(this).html());
        $(this).parents(‘.select-wrap1‘).find(‘.select-list‘).slideUp();
    })
    $(document).click(function(e) {
        var target = $(e.target);
        if(target.closest(".select-wrap").length == 0) {
           $(".select-wrap .select-list").slideUp();  
        };
        if (target.closest(‘.select-wrap1‘).length == 0) {
           $(‘.select-wrap1 .select-list‘).slideUp(‘fast‘, ‘swing‘);
        };
    });

</script>
</html>

可以试试,如果有问题,欢迎提出,以便更正([email protected])

以上是关于jq点击元素之外关闭元素的共存问题的主要内容，如果未能解决你的问题，请参考以下文章

jq自定义下拉菜单，当用户点击非自身元素（下拉菜单）本身时关闭下拉菜单

jq 在iframe中点击按钮,父元素触发事件

JS或JQuery点击其他地方关闭弹出元素，但是点击元素却不会关闭的代码怎么写？

如何在包含 div 元素的侧菜单之外的单击事件上关闭侧菜单？

jq-outerhtml不能执行新元素内部的js解决方案

jq点击非此元素的以为其他元素隐藏该元素