JavaScript onclick事件在第一次单击后停止工作

我正在尝试创建一个自定义的选择菜单。逻辑非常简单：有一个div标记（样式类似于输入字段）配置为在单击时打开另一个div标记（包括条目列表）。然后，用户从菜单中选择一个条目，导致菜单本身消失，并在input div标签中显示所选条目。问题是，在第一次单击input div之后的任何单击都不会再次打开menu 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>

这是我的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;"
}

---

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

要获得预期的结果，请使用下面的选项

检查目标div的子节点长度

如果长度>1，则切换列表类-可见

如果length=1，则追加列表，因为它将被innerHTML从下拉选择的select方法中清除

destination.addEventListener（'click'，function（）{
如果（this.childNodes.length>1）{
list.classList.toggle（'visible'）；
}否则{
这个。附加（列表）；

}
});

问题：使用innerHTML单击下拉列表，您将覆盖目标div的子节点，从而删除列表。
第二次单击时，列表不可显示

代码笔-

工作代码示例


let destination=document.getElementById（'destination'）；
让destination2=document.getElementById（'sub-destination'）；
let list=document.querySelector（'.list'）；
destination.addEventListener（'click'，function（））{
如果（this.childNodes.length>1）{
list.classList.toggle（'visible'）；
}否则{
本.附加（列表）；
}
});
//悬停+过渡
功能突出显示（elem）{
elem.style.cssText=“背景：rgba（0,0,0,0.3）；过渡：背景.5s线性”；
}
功能返回（elem）{
elem.style.cssText=“背景：继承；过渡：背景.5s线性”；
}
功能选择（elem）{
list.classList.toggle（'visible'）；
destination.innerHTML=elem.innerText；
destination.style.cssText=“顶部填充：35em；左侧填充：5.75em；”
}
#目的地{
利润率：10%自动；
宽度：14.15em；
高度：2米；
边框：1px纯黑；
框大小：边框框；
背景：透明；
}  
.名单{
显示：无；
宽度：10em；
身高：5公分；
溢出：滚动；
边框：1px纯黑；
填充：.5em；
背景：白色；
位置：相对位置；
左：10.5%；
前-105%；
}
.身体{
显示：块；
文本对齐：居中；
保证金：0；
填充：.25em；
}
.可见{
显示：继承；
}

Body1
Body2
Body3
Body4
Body5
Body6
要获得预期结果，请使用以下选项

检查目标div的子节点长度
如果长度>1，则切换列表类-可见
如果length=1，则追加列表，因为它将被innerHTML从下拉选择的select方法中清除
destination.addEventListener（'click'，function（）{
如果（this.childNodes.length>1）{
list.classList.toggle（'visible'）；
}否则{
这个。附加（列表）；

}
});

问题：使用innerHTML单击下拉列表，您将覆盖目标div的子节点，从而删除列表。
第二次单击时，列表不可显示

代码笔-

工作代码示例


let destination=document.getElementById（'destination'）；
让destination2=document.getElementById（'sub-destination'）；
let list=document.querySelector（'.list'）；
destination.addEventListener（'click'，function（））{
如果（this.childNodes.length>1）{
list.classList.toggle（'visible'）；
}否则{
本.附加（列表）；
}
});
//悬停+过渡
功能突出显示（elem）{
elem.style.cssText=“背景：rgba（0,0,0,0.3）；过渡：背景.5s线性”；
}
功能返回（elem）{
elem.style.cssText=“背景：继承；过渡：背景.5s线性”；
}
功能选择（elem）{
list.classList.toggle（'visible'）；
destination.innerHTML=elem.innerText；
destination.style.cssText=“顶部填充：35em；左侧填充：5.75em；”
}
#目的地{
利润率：10%自动；
宽度：14.15em；
高度：2米；
边框：1px纯黑；
框大小：边框框；
背景：透明；
}  
.名单{
显示：无；
宽度：10em；
身高：5公分；
溢出：滚动；
边框：1px纯黑；
填充：.5em；
背景：白色；
位置：相对位置；
左：10.5%；
前-105%；
}
.身体{
显示：块；
文本对齐：居中；
保证金：0；
填充：.25em；
}
.可见{
显示：继承；
}

Body1
Body2
Body3
Body4
Body5
Body6
当您第一次单击某个选项时
// 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;"
}