jquery toggle not working after second click

Question

I create a simple dropdown menu to choose a number from 1 to 6. Problem is that after the second click, toggle command is not working and ul remains vanished.

HTML

<div id="selectDiv">1
  <ul id="select">
    <li class="liNum">1</li>
    <li class="liNum">2</li>
    <li class="liNum">3</li>
    <li class="liNum">4</li>
    <li class="liNum">5</li>
    <li class="liNum">6</li>
  </ul>
</div>

CSS

#selectDiv {
  position: relative;
  text-align: center;
  width: 8vw;
  height: 100%;
  background-color: #616160;
  color: white;
}

#select {
  position: absolute;
  padding: 0;
  top: 105%;
  left: 0;
  list-style: none;
  display: none;
}

#select>li {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #616160;
  border-bottom: 0.2px solid #3cb4e4;
  width: 8vw;
  height: 8vw;
}

#select>li:hover {
  background-color: #FFAA00;
}

JQUERY

$('#selectDiv').click(function() {
    $('#select').toggle();
  });

  $('.liNum').on('click', function(event) {
   event.stopPropagation(); // disable or enable makes no difference
    var txt = $(this).html();
    $('#selectDiv').html(txt);
  });

I have created also a jsfiddle

score 1 · Accepted Answer · answered Apr 20 '18 at 17:48

The problem is that $('#selectDiv').html(txt) isn't toggling, it's removing everything in that div including the list, and replacing it with the chosen integer. Instead, try having the 1 in its own tag to be easily modified, and don't forget to call toggle after modifying it:

HTML

<div id="selectDiv"><span id="result">1</span>
 <ul id="select">
  <li class="liNum">1</li>
  <li class="liNum">2</li>
  <li class="liNum">3</li>
  <li class="liNum">4</li>
  <li class="liNum">5</li>
  <li class="liNum">6</li>
 </ul>
</div>

JQuery

$('#selectDiv').click(function() {
  $('#select').toggle();
});

$('.liNum').on('click', function(event) {
  event.stopPropagation();
  var txt = $(this).html();
  $('#result').html(txt);
  $('#select').toggle();
});

jquery toggle not working after second click

1 Answers1