我有几个像这样的按钮,每个按钮创建一个dinamically。注意id" myDropdown +#"中的数字。将与其父容器相同,在本例中为按钮。
<div class="dropdown">
<button id="1" type="button" class="dropbtn" onclick="sendId(this.id)">Hello
<div id="myDropdown1" class="dropdown-content show">
<a href="https://www.google.com">Google</a>
<a href="https://www.fb.com">Facebook</a>
<a href="https://www.twitter.com">Twitter</a>
</div>
</button>
</div>
这是我的Javascript
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function sendId(ide) {
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');
}
}
document.getElementById("myDropdown" + ide).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
$(window).click(function (e) {
//alert(e.target.nodeName);
if (!$(e.target).hasClass('dropbtn')) {
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');
}
}
}
});
我从http://www.w3schools.com/howto/howto_js_dropdown.asp获取此下拉列表并将其修改为包含其中几个。
问题是,下拉列表显示它应该如何以及锚标签点击在任何浏览器上都能正常工作,但不能在IE上显示(Edge是特定的)。我使用alert(e.target.nodeName);
来了解哪个元素触发了事件,当我点击一个锚标记时,警报会显示BUTTON元素(其父容器),就好像它是单击的按钮元素一样。导致锚标记未被点击的原因是什么?如何使它们可点击?