раскрывающийся список ul исчезает при нажатии внутри - PullRequest
Новая
       15

раскрывающийся список ul исчезает при нажатии внутри

0 голосов
/ 29 марта 2019

Довольно много хороших постов по этому вопросу, но ни один, похоже, не помог. У меня есть очень простой выпадающий список, который досадно закрывается при нажатии на список. Я подозреваю, что это связано с тем, как я структурировал список, но я не могу разобраться с этим. Я попробовал обычный 

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;
}

1 Ответ

1 голос
/ 30 марта 2019

Раскрывающийся список ul исчезает при щелчке внутри, поскольку вы не учитываете целевой элемент события .

Чтобы закрыть раскрывающийся список только при нажатии на li active или div cb-dropdown-wrap , вы можете проверить целевой элемент события: 

$(".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>
...