Question

因此，我的jQuery代码将我的select-option元素更改为div。单击每个.lev0 div时，将显示类别.BGbord2的隐藏div，并且类别.opened2将附加到.BGbord2。我的问题是，removeClass("opened2")一旦附加，将不起作用。

所以我要实现的结果是：单击div data-level="SUB1-1"时，将显示id="SUB1-1"的div。当单击div data-level="SUB2-1"时，将显示id="SUB2-1"的div并隐藏id="SUB1-1"的div。我当前的代码无法执行此操作。正如您从底部第三行的jQuery代码中看到的那样，我已经在上面的代码中作了注释，

--$(this).parents(".BGbord").siblings('#'+SUBdiv).removeClass("opened2");

我不知道如何使它工作。我在这里添加了我的代码段，使事情变得更容易。请帮助我

Answer 1

您过于复杂，很难完成。

请看一下该示例，该示例演示了您正在尝试的操作，而没有目前创建组件的复杂性。

请让我知道您有什么问题：

const subMenus = document.querySelectorAll('menu[data-parent]');
document.querySelector('#menu-container').addEventListener('click', showSub);

function showSub(e) {
  if (e.target.nodeName !== 'MENU') return;
  subMenus.forEach(el => {
    el.style.visibility = "hidden"
  });
  document.querySelector(`menu[data-parent="${e.target.id}"]`).style.visibility = "visible";
}

menu {
  width: 100px;
  display: inline-block;
  cursor: pointer;
  padding-left: 2px;
}


menu li {
  margin: 3px;
}

menu li:hover {
  background-color: #333;
  color: white;
}

menu[data-parent] {
  visibility: hidden;
  border: 1px solid black;
  list-style: none;
  margin-top: 0;
}

<section id="menu-container">
  <menu id="menu-one">Menu One
    <menu data-parent="menu-one">
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
    </menu>
  </menu>
  <menu id="menu-two">Menu Two
    <menu data-parent="menu-two">
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
    </menu>
  </menu>
</section>

jQuery removeClass（）方法未在For Loop中触发

1 个答案: