点击下拉菜单什么都不做

Question

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

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

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

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

注意：

1. 您需要调用cars() 来实际初始化事件。
2. 选择器应为“.e38”，表示所有具有e38 类的元素
3. 您需要调用 forEach，因为 querySelector 返回一个元素数组（在这种情况下只有一个元素）
4. 点击事件可用于定位目标（点击的位置）。

这是一个小提琴：https://jsfiddle.net/b9728Lmk/1/

这能解决问题吗？

Answer 2

您可以简单地定义一个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>

Answer 3

这里是更新版本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();