单击下拉菜单什么都不做

Question

我刚开始学 JS，所以这可能是个愚蠢的问题。我想制作一个下拉菜单，如果您选择一个选项，相关段落将可见。我真的不知道如何开始，所以我创建了 cars 函数来使“e38value”段落在单击 e38 按钮时可见，但是当我单击它时没有任何反应，我也不知道为什么。如果有人知道更好的方法，而且它不是那么复杂，初学者也能理解，如果你能与我分享，我会很高兴。

var e38 = document.querySelectorAll('e38value')

function cars() {
  document.querySelectorAll('e38').onclick = function() {
    console.log('clicked');
    e38.classList.toggle("e38hidden");
  }
}

.e38hidden {
  display: none;
}

<nav>
  <menu>
    <menuitem id="kocsid">
    <a>Amilyen kocsid van</a>
    <menu>
      <menuitem id="Audi">
      <a>Audi</a>
      <menu>
        <menuitem><a>Audi</a></menuitem>
        <menuitem><a>Audi</a></menuitem>
        <menuitem><a>Audi</a></menuitem>
        <menuitem><a>Audi</a></menuitem>
      </menu>
      </menuitem>
      <menuitem id="BMW">
      <a>BMW</a>
      <menu>
        <menuitem><a class="e38">750 e38</a></menuitem>
        <menuitem><a>760 e65</a></menuitem>
        <menuitem><a>M3 e46</a></menuitem>
        <menuitem><a>M3 e62</a></menuitem>
      </menu>
      </menuitem>
      <menuitem id="Dodge">
      <a>Dodge</a>
      <menu>
        <menuitem onclick=""><a>Dodge</a></menuitem>
        <menuitem><a>Dodge</a></menuitem>
        <menuitem><a>Dodge</a></menuitem>
        <menuitem><a>Dodge</a></menuitem>
      </menu>
      </menuitem>
</nav>
<p id="e38value" class="e38hidden">e38 value</p>

Answer 1

这是一个更新版本jsFiddle

var  menuItemToClick = document.querySelectorAll('.e38')


function cars(){
// I use for here because the menuItemToClick is an array that containt all element having class name e38
  for (var i = 0; i < menuItemToClick.length; i++) {
      menuItemToClick[i].addEventListener('click', function(event) {
          console.log('clicked');
          ParagraphToHide = document.querySelectorAll('#e38value');
          //I use [0] because the ParagraphToHide is an array, as we use an id we are pretty sure that we will select the first element 
          ParagraphToHide[0].classList.toggle("e38hidden");
      });
  }
} 

cars();

Answer 2

可能还有其他更好的方法来完成它，但这里是修复脚本的方法：

function cars() {
  document.querySelectorAll('.e38').forEach(function(e) {
    e.onclick = function(evt) {
      console.log('clicked', evt.target.innerHTML);
      document.getElementById("e38value").classList.toggle("e38hidden");
    }
  })
}

cars();

注：

您需要调用 cars() 来实际初始化事件。
选择器应该是“.e38”，这意味着所有带有 e38 class
您需要调用 forEach 作为 querySelector returns 一个元素数组（在这种情况下只有一个元素）
点击事件可用于定位目标（点击的位置）。

这是一个fiddle：https://jsfiddle.net/b9728Lmk/1/

这是否解决了问题？

Answer 3

您可以简单地定义一个 onchange 事件，该事件将删除先前选择的项目的可见性并使当前选择的项目可见。

function selectSection(value) {
    let context = document.getElementById("sections");
    for (let visible of context.querySelectorAll("p.visible")) {
        visible.classList.remove("visible");
    }
    if (context.children[value]) context.children[value].classList.add("visible");
}

#sections > p:not(.visible) {
    display: none;
}

<select id="section-selector" onchange="selectSection(this.value)">
    <option value="">Please Select</option>
    <option value="0">First</option>
    <option value="1">Second</option>
    <option value="2">Third</option>
    <option value="3">Fourth</option>
    <option value="4">Fifth</option>
</select>

<div id="sections">
    <p>section 1</p>
    <p>section 2</p>
    <p>section 3</p>
    <p>section 4</p>
    <p>section 5</p>
</div>

单击下拉菜单什么都不做

Dropdown on click doing nothing

html

javascript

css

web