第二次单击后jquery切换不起作用

我创建了一个简单的下拉菜单，从1到6中选择一个数字。问题是，在第二次单击之后，toggle命令不起作用，ul仍然消失

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>

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

我还创建了一个

问题是$（'#selectDiv'）.html（txt）没有切换，它删除了该div中的所有内容，包括列表，并将其替换为所选整数。相反，尝试让1在其自己的标记中易于修改，并且不要忘记在修改后调用toggle：

HTML

$('#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);
  });

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

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

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