下拉菜单隐藏其他元素

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我有一个html页面，其中包含一个名为＆＃39; products＆＃39;它有3行，每行有4个图像。

我想要做的是，每次按下图像时，它都会隐藏所有其他图像，并显示一个块菜单。例如，当我按下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 =＆＃34; toggleMenu（this）＆＃34;。