Question

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

在Menu3上，由于某种原因，我的代码没有识别出锚元素的选择，因此该锚元素的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/

感谢您提供任何帮助。

NewWeb

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/

希望有所帮助！

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

1 个答案: