javascript - 菜单上的元素不响应触发事件

Question

我制作了一个菜单，当您单击或触摸它时会显示一个下拉菜单。至少当您选择“Menu2”这个词时会发生这种情况，但不幸的是，当您选择“Menu3”这个词时不会发生这种情况。

在 Menu3 上，出于某种原因，我的代码无法识别 anchor 元素的选择，因此该 anchor 元素的 id 未传递给将使子菜单出现和消失的函数。

最奇怪的是，当我用“if”语句替换“else if”语句时，当我选择“Menu3”时，“Menu2”下的菜单会出现!

我从中得出的结论是 querySelectorAll 方法和 For 循环正在运行。为什么不能选择第三个菜单选项，我一直是个谜。

我的问题是任何人都可以解决为什么“Menu3”下的菜单无法打开和关闭的问题吗？

javascript 代码中的监听器在窗口加载时被激活。

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function listen(elem, evnt, func) {
  if (elem.addEventListener) { //W3C DOMS.
    elem.addEventListener(evnt, func, false);
  } else if (elem.attachEvent) { //IE DOM 7
    var r = elem.attachEvent("on" + evnt, func);
    return r;
  }
}

function attachListeners() {
  var selectors = document.querySelectorAll("a#a2, a#a3");

  for (var i = 0; i < selectors.length; i++) {
    selectors[i].addEventListener("focus", function(event) {
      var id_of_clicked_element = event.target.id
    });

    if (id_of_clicked_element = 'a2') {
      var touch_div = document.getElementById(id_of_clicked_element);
      // return false;
    } else if (id_of_clicked_element = 'a3') {
      touch_div = document.getElementById(id_of_clicked_element);
      //return false;			
    }
  }
  
  listen(touch_div, 'touchstart', function(event) {
    // get new layer and show it
    event.preventDefault();
    mopen(id_of_clicked_element);
  }, false);

  listen(touch_div, 'mouseover', function(event) {
    // get new layer and show it
    mopen(id_of_clicked_element);  
  }, false);

  listen(touch_div, 'click', function(event) {
    // get new layer and show it
    mopen(id_of_clicked_element);
  }, false);
}

function m1View() {
  var y = document.getElementById('m1');
  if (y.style.visibility === 'hidden') {
    y.style.visibility = 'visible';
  } else {
    y.style.visibility = 'hidden';
  }
}

function m2View() {
  var z = document.getElementById('m2');
  if (z.style.visibility === 'hidden') {
    z.style.visibility = 'visible';
  } else {
    z.style.visibility = 'hidden';
  }
}

// open hidden layer
function mopen(x) { // get new layer and show it
  var openmenu = x;

  if (openmenu = 'a2') {
    m1View();
  } else if (openmenu = 'a3') {
    m2View();
  }
}

window.onload = attachListeners;

#ddm {
  margin: 0;
  padding: 0;
  z-index: 30
}

#ddm li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font: bold 14px arial
}

#ddm li a {
  display: block;
  margin: 0 0 0 0;
  padding: 12px 17px;
  width: 130px;
  background: #CC0066;
  color: #FFF;
  text-align: center;
  text-decoration: none
}

#ddm li a:hover {
  background: #CC0066
}

#ddm div {
  position: absolute;
  visibility: hidden;
  margin: 0;
  padding: 0;
  background: #EAEBD8;
  border: 1px solid #5970B2
}

#ddm div a {
  position: relative;
  display: block;
  margin: 0;
  padding: 5px 10px;
  width: 130px;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  background: #EAEBD8;
  color: #5C124A;
  font: 13px arial;
  border: 1px solid #CC0066
}

#ddm div a:hover {
  background: #CC0066;
  color: #FFF
}

<ul id="ddm">
  <li><a href="#" id="a1">Menu1</a></li>
  <li>
    <a href="#" id="a2">Menu2</a>
    <div id="m1">
      <a href="#"> Dropdown 1.1 </a>
      <a href="#"> Dropdown 1.2 </a>
      <a href="#"> Dropdown 1.3 </a>
      <a href="#"> Dropdown 1.4 </a>
      <a href="#"> Dropdown 1.5 </a>
      <a href="#"> Dropdown 1.6 </a>
    </div>
  </li>
  <li>
    <a href="#" id="a3">Menu3</a>
    <div id="m2">
      <a href="#">Menu4</a>
    </div>
  </li>
  <li><a href="#" id="a4">Menu5</a></li>
  <li><a href="#" id="a5">Menu6</a></li>
</ul>

<div style="clear:both"></div>

可以在这里找到 JSfiddle:https://jsfiddle.net/Webfeet/z9x6Ly6k/27/

感谢您提供的任何帮助。

新网

Answer 1

我建议几件事。首先，正如 Leo Li 所建议的，我认为您可能将其复杂化了一点。例如，您可以将 attachListeners 函数替换为如下内容:

function attachListeners() {
    var selectors = document.querySelectorAll("a#a2, a#a3");

    for (var i = 0; i < selectors.length; i++) {
        selectors[i].addEventListener('touchstart', function(event){
            event.preventDefault();
            mopen(event.target.id);
        }, false);

        selectors[i].addEventListener('mouseover', function(event){
            event.preventDefault();
            mopen(event.target.id);
        }, false);

        selectors[i].addEventListener('click', function(event){
            event.preventDefault();
            mopen(event.target.id);
        }, false);
    }
}

但是，除此之外，最大的问题之一是 mopen() 函数。您不是检查为 x 传入的值，而是重新分配它。只需将等号换成三个等号，如下所示:

  if (openmenu === 'a2') {
    m1View();
  } else if (openmenu === 'a3') {
    m2View();
  }

它仍然可能不是您正在寻找的东西，但这是您的 JSfiddle 的一个分支，其中包含我的更改 - https://jsfiddle.net/n90ryvfd/

希望对您有所帮助!