Question

我正在开发一个自定义选择菜单，当用户点击文档上的其他位置时，该菜单需要关闭菜单选项。然而，它没有这样做，我很困惑。同样，用户可以同时打开多个下拉菜单，这也是不希望的。有人可以解释我需要解决这个问题吗？

HTML

<body>
    <div class="select">
        <div class="arrow"></div>
        <div class="option-menu">
            <div class="option">Hello</div>
            <div class="option">Goodbye</div>
        </div>
    </div>

    <div class="select">
        <div class="arrow"></div>
        <div class="option-menu">
            <div class="option">A</div>
            <div class="option">B</div>
            <div class="option">C</div>
        </div>
    </div>
</body>

JS

$(document).ready(function(){
    var select = $(".select");
    $(select).on("click", function(){
        select = $(this);
        $(this).find(".option-menu").each(function(){
            $(this).toggle();
        })

        $(".option").on("click", function(){
            $(select).children("p").remove();
            var value = $(this).text();
            $(select).prepend("<p>" +value +"<p>");
        })
    })
})

CSS

body{
    background-color: rgb(200, 200, 200);
}
#main{
    display: block;
    float: left;
    margin-top: 5%;
    margin-left: 15%;
}
.select{
    display: inline-block;
    width: 250px;
    height: 35px;
    border-radius: 8px;
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.5);
}
.arrow{
    float: right;
    margin-top: 10px;
    margin-right: 5%;
    height: 80%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.option-menu{
    display: none;
    float: left;
    margin-left: 5px;
    width: 240px;
    box-shadow: 0px 3px 3px 3px rgba(0, 0, 0, 0.5);
}
.option{
    width: 100%;
    cursor: pointer;
}
.active{
    background-color: blue;
}
.select p{
    position: relative;
    float: left;
    top: 10%;
    left: 10%;
    margin: 0;
    padding: 0;
    background-color: red;
}

这也是我的笔。

http://codepen.io/RobbyT15/pen/LIKsJ

Answer 1

在下拉列表中停止传播事件：

$('.option-menu').on('click', function(e) {
    e.stopPropagation();
});

$('body').on('click', function(e) {
    $(".option-menu").hide();
});

当您单击正文时，您告诉选项菜单关闭，但由于事件传播停止，当您在选项菜单中单击时，单击事件将永远不会到达正文。

PS：您的codepen示例对我不起作用，因此我无法提供一个有效的示例。

Answer 2

In CoffeeScript, do something like this:

$('.more-btn').on 'click', (e) ->
  if $('.card-content.more').hasClass('show-more-menu')
    $('.card-content.more').removeClass('show-more-menu')

  $(e.target).closest('.card-content.more').addClass('show-more-menu')

$(document).on 'click', ->
  $(".card-content.more").removeClass('show-more-menu')

$('.card-content.more').on 'click', (e) ->
  e.stopPropagation()

Answer 3

您可以添加一些要操作的类，例如current，然后只隐藏当前的元素

$(this).find(".option-menu").each(function(){
  $('.current').hide();
  if ($(this).hasClass('current')){
     $(this).removeClass('current');
  }else{     
     $(this).show().addClass('current'); 
  } 
})

隐藏菜单时隐藏菜单

$(document).on('click',function(e){
   if ( $(e.target).closest('.select').length === 0 ) {
      $('.current').hide().removeClass('current');
   }
})

CodePen

如何在用户点击页面上的其他位置时关闭自定义下拉菜单

3 个答案: