下拉菜單，隱藏其他元素

Question

function toggleMenu() { 
 
     var menuBox = document.getElementById('dropdown');  
 
     if(menuBox.style.display == "none") { 
 
     menuBox.style.display = "block"; 
 
     } 
 
     else { 
 
     menuBox.style.display = "none"; 
 
     } 
 
    }

 <ul class="prodli clearfix"> 
 
      <li> 
 
       <figure class="prodphot" > 
 
        <img src="https://i.giphy.com/media/qrwthQPPQrtEk/200_s.gif" alt="Lb"> 
 
        <div class="text"> 
 
         <div class="t">Element1</div> 
 
        </div> 
 
       </figure> 
 
      </li> 
 

 
      <li> 
 
       <figure class="prodphot" onclick="toggleMenu()"> 
 
        <img src="https://i.giphy.com/media/qrwthQPPQrtEk/200_s.gif" alt="Lb2">  
 
        <div class="text"> 
 
         <div class="t">Element2</div> 
 
         <ul id="dropdown" style="display: none"> 
 
           <li>entry 1</li> 
 
           <li>entry 2</li> 
 
           <li>entry 3</li> 
 
           <li>entry 4</li> 
 
          </ul> 
 
        </div> 
 
       </figure> 
 
      </li> 
 
      <li> 
 
       <figure class="prodphot" onclick="toggleMenu()"> 
 
        <img src="https://i.giphy.com/media/qrwthQPPQrtEk/200_s.gif" alt="Lb3"> 
 
        <div class="text"> 
 
         <div class="t">Element3</div> 
 
        </div> 
 
       </figure> 
 
      </li> 
 
      <li> 
 
       <figure class="prodphot"> 
 
        <img src="https://i.giphy.com/media/qrwthQPPQrtEk/200_s.gif" alt="Lb4"> 
 
        <div class="text"> 
 
         <div class="t">Element4</div> 
 
        </div> 
 
       </figure> 
 
      </li> 
 
     </ul> 
 
     <ul class="prodli clearfix"> 
 
      <li> 
 
       <figure class="prodphot"> 
 
        <img src="https://i.giphy.com/media/qrwthQPPQrtEk/200_s.gif" alt="Leather Belt" class="belt"> 
 
        <div class="text"> 
 
         <div class="t">Element 5 </div> 
 
        </div> 
 
       </figure> 
 
      </li>

我有一個包含一個名爲「產品」有3排，每排4個圖像部分的HTML頁面。

我想要做的是每次按下圖像時它都會隱藏所有圖像，並顯示一個塊菜單。例如，當我按下element2時，它將顯示下面的列表，它將隱藏元素1,3,4,5。

我使用了一個函數，但是當我點擊圖像時，它只是顯示圖像上的菜單。

你能提供任何提示嗎？

Answer 1

試試這個：沒有圖書館需要

function toggleMenu(listitem) { 
    var menuBox = document.getElementById('dropdown'); 
    var listItems = document.querySelectorAll('.prodphot'); 
    if(menuBox.style.display == "none") { 
     [].filter.call(listItems, function(el) { 
      el == listitem ? el.style.display = 'block': el.style.display = 'none'; 
     }); 
     menuBox.style.display = "block"; 
    } 
    else { 
     [].filter.call(listItems, function(el) { 
      el.style.display = 'block'; 
     }); 
     menuBox.style.display = "none"; 
    } 
} 

在你的HTML你只需要添加爲參數的函數調用：的onclick =「toggleMenu（本）」。