多个下拉菜单使用相同的JS代码

我有一个简单的下拉菜单使用JavaScript。多个下拉菜单使用相同的JS代码

<div id="show-nav" class="dropdown"> 

    <div id="dropdown" onClick="myFunction()">Menu Name</div> 

      <div id="myDropdown" class="dropdown-content"> 

       <a href="#option1">Option 1</a> 
       <a href="#option2">Option 2</a> 
       <a href="#option3">Option 3</a> 

      </div> 

     </div>

而且JS：

<script> 

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown menu if the user clicks outside of it 
window.onclick = function(event) { 
if (!event.target.matches('#dropdown')) { 

var dropdowns = document.getElementsByClassName("dropdown-content"); 
var i; 
for (i = 0; i < dropdowns.length; i++) { 
    var openDropdown = dropdowns[i]; 
    if (openDropdown.classList.contains('show')) { 
    openDropdown.classList.remove('show'); 
    } 
} 
} 
} 

</script>

我有几个相邻的div同一个菜单的多个副本。有了这段代码，菜单在第一个元素中工作，但如果我尝试在第二个元素中切换它，它只会在第一个元素中下降。我怎样才能使这个工作在单个页面上的几个菜单？

来源

2017-02-19 Lily T S

'html'代码会有帮助。 –

您需要在代码的两个变化：

使所有按钮的onClick属性相同。（我想这是“myFunction（）;”）
更改您的处理程序以处理实际单击的按钮。

这是可能与event.target：

function myFunction(event) { 
    event.target.classList.toggle("show"); 
}

来源

2017-02-19 23:00:28

目前所有的onClick属性都是这样的：

你是说我把上面的代码替换掉了吗？或者我需要补充一点？ –

向该myFunction通this。那就是：

<div id="dropdown" onClick="myFunction(this)">Menu Name</div>

编写JavaScript函数如下图所示：

function myFunction(a) { 
    a.parentNode.getElementsByClassName("dropdown-content")[0].classList.toggle("show"); 
}

不需要那么多的JavaScript的：保持尽可能简单。

来源

2017-08-16 12:34:50

多个下拉菜单使用相同的JS代码

回答

相关问题