Question

我有一个菜单结构，其中隐藏的子菜单不是菜单项的子级。我在主顶级链接中有一个span元素，它将用作箭头来表示移动设备上的子菜单。当用户触摸span元素时，我需要下拉菜单添加一个类（Javascript不使用jQuery）以显示它。

这样的事情（请注意，这不是我构造菜单的方式，这是我无法更改的站点上已经存在的代码）

<a href="#">Top Level Menu Item #1
<span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

<a href="#">Top Level Menu Item #2
<span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

<a href="#">Top Level Menu Item #3
<span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

因此，当触摸或单击跨度时，.dropdown菜单将添加一个类。

Answer 1

您可以步行dom，如果是这样的结构，它将始终具有HTML明智的外观（例如，您向其中添加一个类，一个包装类/ id或跨度唯一的东西）：

const spans = Array.from(document.querySelectorAll('.dropdown-toggle'))

const addClassToSubmenu = el => {
  el.target.parentNode.nextElementSibling.classList.toggle('classtoadd')
}

spans.forEach(span => {
  span.addEventListener('click', addClassToSubmenu)
})

那会。

这是代码段：

https://codepen.io/Venomzzz/pen/qJyvyN?editors=1010

Answer 2

只需与span.parentNode.nextElementSibling.classList.toggle('visible');

一起使用

const spans = document.querySelectorAll('a>span');

for (const span of spans) {
  span.addEventListener('click', (e) => {
    e.stopPropagation();
    span.parentNode.nextElementSibling.classList.toggle('visible');
  })
}

.dropdown-menu {
  opacity: 0;
  transition: all .2s ease-in-out;
}

.dropdown-menu.visible {
  opacity: 1;
}

<a href="#">Top Level Menu Item #1
  <span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

<a href="#">Top Level Menu Item #2
  <span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

<a href="#">Top Level Menu Item #3
  <span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

请注意，我将点击监听器限制为<span>⇩</span>，链接本身不受影响。

让我知道您是否需要IE11兼容代码。

Answer 3

您可以尝试使用jQuery next（）完成此操作：

注意：您需要在标签中添加“菜单”类，并且需要扩展mouseout和hover调用，以防止子菜单在鼠标移出主菜单时消失。

CSS：

{
    "$schema": "http://json.schemastore.org/proxies",
    "proxies": {
        "test": {
            "matchCondition": {
                "route": "test"
            },
            "backendUri": "https://testbasenewtest.azurewebsites.net/api/HttpTrigger1",
            "responseOverrides": {
                "response.statusCode": "200",
                "response.statusReason": "Successful Response",
                "response.headers.API_Login": "custom"
            }
        }
    }
}

HTML：

.dropdown-menu {display: none }

jQuery：

<a href="#" class="menu">Top Level Menu Item #1
<span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>
&nbsp;
<a href="#" class="menu">Top Level Menu Item #2
<span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>
&nbsp;
<a href="#" class="menu">Top Level Menu Item #3
<span>⇩</span>
</a>
<div class="dropdown-menu">Dropdown Menu Here</div>

单击嵌套的子元素时，Javascript将类添加到下一个元素

3 个答案: