點擊下拉菜單什么都不做

Question

我剛剛開始 JS，所以這可能是一個愚蠢的問題。 我想做一個下拉菜單，如果您選擇一個選項，相關段落將可見。 我真的不知道如何開始，所以我創建了汽車 function 以在單擊 e38 按鈕時使“e38value”段落可見，但是當我單擊它時沒有任何反應，我不知道為什么。 如果有人知道這樣做的更好方法並且它不是那么復雜並且初學者可以理解它，如果您可以與我分享，我將非常高興。

JS：

var e38 = document.querySelectorAll('e38value')

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

CSS：

.e38hidden{
    display: none;
}

HTML：

<script src="onclick.js"></script>
  <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 class 的元素
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();