单击内部

Question

关于此的一些不错的文章，但似乎没有帮助。我有一个非常简单的下拉列表，单击该列表会烦人地关闭它。我怀疑这与我整理列表的方式有关，但我无法理解。我已经尝试过平常的

e.stopPropagation() and also
$(".cb-dropdown-wrap:not('.cb-dropdown')").on("click", function(e) {}

我强烈怀疑我在做一些愚蠢的事情-请帮忙！ 小提琴：http://jsfiddle.net/tzxhryeu/

  $(".cb-dropdown-wrap").on("click", function(e) {

  if ($(".cb-dropdown").is(':visible')) { //alert('i can see it') 
    $(this).find("ul.cb-dropdown").slideUp();
    console.log(this)
  } else { //alert('No see it')
    $(this).find("ul.cb-dropdown").slideDown();
    console.log(this)
  }



<div class='cb-dropdown-wrap'>Select province

  <ul class='cb-dropdown'>
    <li class='IntroRow'>Intro container</li>
    <li class='active'>Option 3</li>
    <li class='active'>Option 4</li>
    <li class='active'>Option 5</li>
  </ul>

</div>



.cb-dropdown-wrap {
  /*bottom: 6px; */
  width: 200px;
  padding: 3px 0 3px 0;
  color: grey;
  border: 1px solid grey;
  outline: none;
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
  border: 2px solid green;
}

.cb-dropdown {
  border: 1px solid red;
  cursor: default;
  position: absolute;
  margin-top: 6px;
  padding: 0 10px 10px 5px;
  display: none;
  outline: none;
}

.cb-dropdown li {
  margin: 10px 0 0 5px;
  /* padding: 5px 10px; */
  width: 280px;
}

Answer 1

在内部单击时ul下拉列表消失，因为您不考虑event target element。

只有在单击 li active 或 div cb-dropdown-wrap 时，才能关闭下拉菜单，您可以测试事件目标元素：< / p>

$(".cb-dropdown-wrap").on("click", function(e) {
    var t = $(e.target);
    // test the target
    if (t.is(':not(.cb-dropdown-wrap)') && t.is(':not(.cb-dropdown li.active)')) {
        return;
    }
    if ($(".cb-dropdown").is(':visible')) {
        $(this).find("ul.cb-dropdown").slideUp();
    } else {
        $(this).find("ul.cb-dropdown").slideDown();
    }
});
$('li.active').on('click', function(e) {
    console.log('-->' + this.textContent)
})

/* Top narrow container */
.cb-dropdown-wrap {
    /*bottom: 6px; */
    width: 200px;
    padding: 3px 0 3px 0;
    color: grey;
    border: 1px solid grey;
    outline: none;
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
    border: 2px solid green;
}

/* Style long dropdown container */
.cb-dropdown {
    border: 1px solid red;
    cursor: default;
    position: absolute;
    margin-top: 6px;
    padding: 0 10px 10px 5px;
    display: none;
    outline: none;
}

/* Style for ALL li's inside dropdown */
.cb-dropdown li {
    margin: 10px 0 0 5px;
    /* padding: 5px 10px; */
    width: 280px;
}

/* Style Intro row */
.cb-dropdown li.IntroRow {
    border: 1px solid lightgrey;
    height: 50px;
}

/* Style 'li active' elements ONLY  */
.cb-dropdown li.active {
    border: 1px solid blue;
    background: #ececec;
}

.cb-dropdown li.active:hover {
    background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='cb-dropdown-wrap'>Select province

    <ul class='cb-dropdown'>
        <li class='IntroRow'>Intro container</li>
        <li class='active'>Option 3</li>
        <li class='active'>Option 4</li>
        <li class='active'>Option 5</li>
    </ul>
</div>