首次单击后，JavaScript onclick事件停止工作

Question

我正在尝试创建自定义的选择菜单。 逻辑很简单：配置了一个div标签（样式类似于输入字段），以在onclick上打开另一个div标签（包括条目列表）。 然后，用户从菜单中选择一个条目，从而使菜单本身消失，并且所选条目将显示在输入div标签中。 问题在于输入div上的第一个单击之后的任何单击都不会再次打开菜单div。

这是我的HTML：

<div id="destination">
<div class="list">
  <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body1</p>
  <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body2</p>
  <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body3</p>
  <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body4</p>
  <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body5</p>
  <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body6</p>
</div>
</body>

这是我的CSS：

#destination{
  margin: 10% auto;
  width: 14.15em;
  height: 2em;
  border: 1px solid black;
  box-sizing: border-box;
  background: transparent;
}

.list{
  display: none;
  width: 10em;
  height: 5em;
  overflow:scroll;
  border: 1px solid black;
  padding: .5em;
  background:white;
  position: relative;
  left: 10.5%;
  top:-105%;
}

.body{
  display: block;
  text-align: center;
  margin:0;
  padding:.25em;
}

.visible{
  display:inherit;
}

这是我的JavaScript：

// identify the input div
let destination = document.getElementById('destination');

// identify the menu div
let list = document.querySelector('.list');

// display the menu div onclick by modifying its class attribute
destination.addEventListener('click',function(){
    list.classList.toggle('visible');
});

// just a few animations
function highlight(elem){
    elem.style.cssText = "background: rgba(0,0,0,0.3); transition: background .5s linear";
}
function back(elem){
    elem.style.cssText = "background: inherit; transition: background .5s linear";
}

// when any entry is selected, hide the menu div and 
// display the entry in the input div
function select(elem){
  list.classList.toggle('visible');
  destination.innerHTML = elem.innerText;
  destination.style.cssText = "padding-top: .35em; padding-left: 5.75em;"
}

我无法从浏览器控制台获得任何有用的消息（没有错误），该代码在语法上似乎是正确的。

Answer 1

为了达到预期的效果，请使用以下选项

1. 检查childNodes的目标div的长度
2. 如果长度> 1，则切换列表类-可见
3. 如果length = 1，则追加列表，因为它将由innerHTML从下拉选择的select方法中清除

destination.addEventListener('click',function(){ if(this.childNodes.length > 1){ list.classList.toggle('visible'); }else{ this.append(list);
} });

问题：在单击下拉列表的innerHTML时，您将覆盖目标div的childNodes并由此删除list。 第二次单击时，列表无法显示。

codepen- https: //codepen.io/nagasai/pen/YoaxGY

工作代码示例

 let destination = document.getElementById('destination'); let destination2 = document.getElementById('sub-destination'); let list = document.querySelector('.list'); destination.addEventListener('click',function(){ if(this.childNodes.length > 1){ list.classList.toggle('visible'); }else{ this.append(list); } }); // on hover + transition function highlight(elem){ elem.style.cssText = "background: rgba(0,0,0,0.3); transition: background .5s linear"; } function back(elem){ elem.style.cssText = "background: inherit; transition: background .5s linear"; } function select(elem){ list.classList.toggle('visible'); destination.innerHTML = elem.innerText; destination.style.cssText = "padding-top: .35em; padding-left: 5.75em;" } 

 #destination{ margin: 10% auto; width: 14.15em; height: 2em; border: 1px solid black; box-sizing: border-box; background: transparent; } .list{ display: none; width: 10em; height: 5em; overflow:scroll; border: 1px solid black; padding: .5em; background:white; position: relative; left: 10.5%; top:-105%; } .body{ display: block; text-align: center; margin:0; padding:.25em; } .visible{ display:inherit; } 

 <div id="destination"> <div class="list"> <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body1</p> <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body2</p> <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body3</p> <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body4</p> <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body5</p> <p class="body" onmouseover="highlight(this)" onmouseleave="back(this)" onclick="select(this)">Body6</p> </div>