zoukankan html css js c++ java

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>

可以试试,如果有问题,欢迎提出,以便更正(1018967523@qq.com)

查看全文

相关阅读:
Redis数据类型和基本操作
 Redis持久化
 Redis安装
 MySQL5.7二进制包安装
 Django ORM多表操作
 Django中启用事务
 Django ORM单表操作
 MySQL事务
 用顺序栈实现十进制向二进制转化
 顺序栈

原文地址：https://www.cnblogs.com/hanhui66/p/7607923.html