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

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

检查childNodes的目标div长度
如果长度> 1，则切换列表类-可见
如果length = 1，则附加列表，因为innerHTML将从下拉菜单中的 select 方法中清除该列表

/* +---+--------------------+ | r | Register(s) | +---+--------------------+ | a | %eax, %ax, %al | | b | %ebx, %bx, %bl | | c | %ecx, %cx, %cl | | d | %edx, %dx, %dl | | S | %esi, %si | | D | %edi, %di | +---+--------------------+ movq = copies 64 bit movl = copies 23 bit */ #include <iostream> using namespace std; int main(){ int input = 5, output; __asm__ ("addl %%ebx, %%eax;" // adding eax value (5) to eax "addl $5, %%eax;" // adding 5 to eax : "=a" (output) : "a" (input)); cout << output << endl; // printing 10

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

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

工作代码示例

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

  }
});

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

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

1 个答案: