onclick показать элемент и скрыть другой элемент

Question

Мне просто нужно показать один список ul onclick и скрыть все остальные, которые не были нажаты, если они были открыты. Не могу понять это. См. Демонстрацию ниже. У меня это работает иначе. Просто не могу понять эту часть.

https://jsfiddle.net/z7sv50gq/16/

.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

попробуйте этот код, я сделал пару исправлений

// 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); 
 
});

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

... И еще несколько строк, которые имеют мульти- уровня

// 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); 
 
});

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

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

Answer 2

Я думаю, что вы делаете это слишком сложно. Вы можете сделать это только с простым JQuery

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

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

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