Question

当我们单击图片时，我正在创建用户下拉列表，其中包含下拉列表或卡片。我想在用户单击下拉列表外部时将其关闭。关闭代码将使用JavaScript。请解决这个问题。我认为JavaScript中将有一个删除功能，单击该功能后将删除该下拉列表。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Simple popup menu</title>

<style>
    body {
        margin: 0;
        background: tomato;
        font-family: 'Open Sans', sans-serif;
    }

    .menubtn {
        cursor: pointer;
        width: 40px;
        height: 20px;
        right: 10px;
        top: 10px;
        position: absolute;
    }

    .userimg {
        border-radius: 50%;
        height: 35px;
        width: 35px;
    }

    .navmenu {
        width: 150px;
        border-radius: 10px;
        margin-top: 30px;
        background: #fff;
        position: absolute;
        right: 18px;
        top: 25px;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
        z-index: 10;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
    }

    .navmenu.opened {
        visibility: visible;
        opacity: 1;
    }

    .navmenu::before {
        content: '';
        position: absolute;
        top: -5px;
        right: 7px;
        width: 15px;
        height: 15px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .navmenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .navmenu ul.text-list {
        text-align: left;
        font-weight: 100;
        width: 100%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navmenu ul.text-list li a {
        text-decoration: none;
        padding-left: 20px;
        padding-top: 5px;
        color: #343434;
        font-weight: 600;
        display: block;
        line-height: 27px;
        -webkit-transition: all 200ms ease;
        transition: all 200ms ease;
    }

    .navmenu ul.text-list li a:hover {
        color: tomato;
    }
</style>
</head>

<body>
<div class="menubtn">
    <span>
        <img class="userimg" src="http://tryma.in/images/user/default.png"/>
    </span>
</div>
<div class="navmenu">
    <ul class="text-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $('.menubtn').on('click', function() {
        $('.navmenu').toggleClass('opened');
    });
</script>
</body>

</html>

请帮助我解决此代码。谢谢

Answer 1

绑定文档，然后单击{{root}}类。
使用e.stopPropagation()，以便事件不会在opened上传播，单击document会调用该事件

.menubtn

$('.menubtn').on('click', function(e) {
  e.stopPropagation();
  $('.navmenu').toggleClass('opened');
});
$(document).on('click', function() {
  $('.navmenu').removeClass('opened');
});

body {
  margin: 0;
  background: tomato;
  font-family: 'Open Sans', sans-serif;
}

.menubtn {
  cursor: pointer;
  width: 40px;
  height: 20px;
  right: 10px;
  top: 10px;
  position: absolute;
}

.userimg {
  border-radius: 50%;
  height: 35px;
  width: 35px;
}

.navmenu {
  width: 150px;
  border-radius: 10px;
  margin-top: 30px;
  background: #fff;
  position: absolute;
  right: 18px;
  top: 25px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.navmenu.opened {
  visibility: visible;
  opacity: 1;
}

.navmenu::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 7px;
  width: 15px;
  height: 15px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.navmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navmenu ul.text-list {
  text-align: left;
  font-weight: 100;
  width: 100%;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.navmenu ul.text-list li a {
  text-decoration: none;
  padding-left: 20px;
  padding-top: 5px;
  color: #343434;
  font-weight: 600;
  display: block;
  line-height: 27px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.navmenu ul.text-list li a:hover {
  color: tomato;
}

如果用户单击下拉菜单，如何关闭下拉菜单？

1 个答案: