Question

我只需要在onclick上显示一个ul列表，并隐藏所有未点击的其他列表（如果它们是打开的）。无法弄清楚这一点。见下面的演示。我有这个工作否则。只是无法弄清楚那一部分。

  .nav ul {display:none;}
  .nav ul.show{display:block;}

  <ul class="nav">
  <li><a class="has-dropdown" href="">Main Link</a>
    <ul>
        <li><a href="">Dropdown-Link</a></li>
        <li><a href="">Dropdown-Link</a></li>
        <li><a href="">Dropdown-Link</a></li>
    </ul>
</li>
<li><a class="has-dropdown" href="">Main Link</a>
    <ul>
        <li><a href="">Dropdown-Link</a></li>
        <li><a href="">Dropdown-Link</a></li>
        <li><a href="">Dropdown-Link</a></li>
    </ul>
</li>
</ul>

    var findDropdowns = document.querySelectorAll(".has-dropdown");
    var newdropdownMenu;

    function dropdownMenu(anchor) {
        this.anchor = anchor;
    }

    for(var i = 0; i < findDropdowns.length; i++) {

    if(i == 0) {
        var dropdownId = "has-dropdown-1";
        findDropdowns[i].setAttribute("id", dropdownId);
    }else {
        var addOneToIndex = i + 1;
        dropdownId = "has-dropdown-" + addOneToIndex;
        findDropdowns[i].setAttribute("id", dropdownId);
    }

    newdropdownMenu = new dropdownMenu(dropdownId);

    var targetDropdown = document.getElementById(newdropdownMenu.anchor);

    $(targetDropdown).click(function (e) {
        e.preventDefault();
            $(this).siblings(".nav ul").addClass("show");


    });

    }

Answer 1

尝试此代码，我已做了几个修复

＆＃13;

// Dropdown menu
    
var findDropdowns = document.querySelectorAll(".has-dropdown");
var toArray = function(collection) {return [].slice.call(collection) }

toArray(findDropdowns).forEach(function(e) {
    e.addEventListener("click", function(ev) {
        ev.preventDefault();
        var others = toArray(document.querySelectorAll(".show"));
        others.forEach(function(o){
            o.classList.remove("show");
        });
        e.parentNode.children[1].classList.add("show");
    }, false);
});

＆＃13;

.nav ul {display:none;}
.nav ul.show{display:block;}

＆＃13;

<ul class="nav">
    <li><a class="has-dropdown" href="">Main Link</a>
        <ul>
            <li><a href="">Dropdown-Link</a></li>
            <li><a href="">Dropdown-Link</a></li>
            <li><a href="">Dropdown-Link</a></li>
        </ul>
    </li>
    <li><a class="has-dropdown" href="">Main Link</a>
        <ul>
            <li><a href="">Dropdown-Link</a></li>
            <li><a href="">Dropdown-Link</a></li>
            <li><a href="">Dropdown-Link</a></li>
        </ul>
    </li>
</ul>

＆＃13;

...还有几行，你有一个多级菜单

＆＃13;

// Dropdown menu
    
var findDropdowns = document.querySelectorAll(".has-dropdown");
var toArray = function(collection) {return [].slice.call(collection)}

toArray(findDropdowns).forEach(function(e) {
    e.addEventListener("click", function(ev) {
        ev.preventDefault();
      
        var others = toArray(document.querySelectorAll(".show"));
        var parentLink = e.parentNode.parentNode.parentNode.children[0];
      
        others.forEach(function(o){
          if(o.parentNode.children[0] !== parentLink) {
            o.classList.remove("show");
          }
        });
      
        e.parentNode.children[1].classList.add("show");
    }, false);
});

＆＃13;

.nav ul {display:none;}
.nav ul.show{display:block;}

＆＃13;

<ul class="nav">
    <li><a class="has-dropdown" href="">Main Link</a>
        <ul class="show">
            <li><a class="has-dropdown" href="">Main Link</a>
                <ul class="show">
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                </ul>
            </li>
            <li><a class="has-dropdown" href="">Main Link</a>
                <ul>
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                </ul>
            </li>
            <li><a class="has-dropdown" href="">Main Link</a>
                <ul>
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a class="has-dropdown" href="">Main Link</a>
        <ul>
            <li><a class="has-dropdown" href="">Main Link</a>
                <ul>
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                </ul>
            </li>
            <li><a class="has-dropdown" href="">Main Link</a>
                <ul>
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                </ul>
            </li>
            <li><a class="has-dropdown" href="">Main Link</a>
                <ul>
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                    <li><a href="">Dropdown-Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

＆＃13;

Answer 2

我认为你太复杂了。你可以用简单的jQuery

来做到这一点

＆＃13;

$(function() {
  $(".has-dropdown").click(function(e) {
    e.preventDefault();
    $('.nav li ul').removeClass('show'); //Hide all dropdowns
    $(this).siblings(".nav ul").addClass("show"); //Display the clicked dropdown
  });
});

＆＃13;

.nav ul {
  display: none;
}
.nav ul.show {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li><a class="has-dropdown" href="">Main Link</a>

    <ul>
      <li><a href="">Dropdown-Link</a>
      </li>
      <li><a href="">Dropdown-Link</a>
      </li>
      <li><a href="">Dropdown-Link</a>
      </li>
    </ul>
  </li>
  <li><a class="has-dropdown" href="">Main Link</a>

    <ul>
      <li><a href="">Dropdown-Link</a>
      </li>
      <li><a href="">Dropdown-Link</a>
      </li>
      <li><a href="">Dropdown-Link</a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

onclick显示元素并隐藏其他元素

2 个答案: