使用jQuery的最佳实践，使一个div点击，并切换上/下滑动兄弟的ul?

Question

使用jQuery的最佳/最干净的做法是什么，以便当您单击ID为"open"的div时，它将切换打开/关闭子菜单兄弟(不是所有子菜单)?

理想情况下我不想使用。next/。Prev用于在父元素li下添加其他HTML，然后将其打断

<div class="mobilemenu">
<li>
<a href="/menu-item-1">Menu item 1</a>
<div id="open">▼</div>
<ul class="submenu" style="display: none;">
<li><a href=/menu-item-1/subitem1>Sub Item 1</a></li>
<li><a href=/menu-item-1/subitem2>Sub Item 2</a></li>
<li><a href=/menu-item-1/subitem3>Sub Item 3</a></li>
</ul>
</li>

<li>
<a href="/menu-item-2">Menu item 2</a>
<div id="open">▼</div>
<ul class="submenu" style="display: none;">
<li><a href=/menu-item-2/subitem1>Sub Item 1</a></li>
<li><a href=/menu-item-2/subitem2>Sub Item 2</a></li>
<li><a href=/menu-item-2/subitem3>Sub Item 3</a></li>
</ul>
</li>
<li>
<a href="/menu-item-1">Menu item 3</a>
<div id="open">▼</div>
<ul class="submenu" style="display: none;">
<li><a href=/menu-item-3/subitem1>Sub Item 1</a></li>
<li><a href=/menu-item-3/subitem2>Sub Item 2</a></li>
<li><a href=/menu-item-3/subitem3>Sub Item 3</a></li>
</ul>
</li>
</div>

多谢

Answer 1

我喜欢这样做的方式是向上到父DOM树，然后向下找到目标。我同意你的观点，如果任何元素移动，使用next()或sibling()可能会变得有点可怕。下面是使用您的代码的示例:

我对你的代码做了一点修改，只是为了让它更容易完成。

* *更新最好让整个导航项可点击以打开下拉菜单，因为人们可能不知道点击小箭头。在本例中，只需将父链接作为菜单选项之一，如"View all…">

/* Capture the click */
$(".mobilemenu > li > a.menu-item-parent").click(function(e) {
/* Prevent href event */
e.preventDefault();
/* Get parent element */
const par = $(this).closest("li");
/* Get sub-menu element */
const submenu = par.find("ul.submenu");
/* Check if sub-menu is visible */
if (submenu.is(":visible")) {
/* If visible remove active class and slide up */
par.removeClass("active");
submenu.slideUp("fast");
} else {
/* If not visible add active class and slide down */
par.removeClass("active").addClass("active");
submenu.slideDown("fast");
}
})

body,
html {
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 16px;
}
* {
box-sizing: border-box;
}
.mobilemenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mobilemenu>li,
.mobilemenu .submenu>li {
background: slategray;
}
.mobilemenu>li:not(:first-child) {
border-top: 1px solid darkgray;
}
.mobilemenu>li>a,
.mobilemenu .submenu>li>a {
display: flex;
align-items: center;
padding: 12px 42px 12px 12px;
color: white;
text-decoration: none;
flex-basis: 100%;
position: relative;
}
.mobilemenu>li>a>.open {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 30px;
font-size: .7em;
line-height: 1em;
}
.mobilemenu>li>a>.open:before {
content: "▼";
display: block;
transition: transform .3s ease-out;
}
.mobilemenu>li.active>a>.open:before {
transform: rotate(180deg);
}
.mobilemenu .submenu {
display: none;
}
.mobilemenu .submenu>li {
background: coral;
}
.mobilemenu .submenu>li:not(:first-child) {
border-top: 1px solid white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="mobilemenu">
<li>
<a href="/menu-item-1" class="menu-item-parent">
Menu item 1
<span class="open"></span>
</a>
<ul class="submenu">
<li><a href="/menu-item-1/subitem1">Sub Item 1</a></li>
<li><a href="/menu-item-1/subitem2">Sub Item 2</a></li>
<li><a href="/menu-item-1/subitem3">Sub Item 3</a></li>
</ul>
</li>

<li>
<a href="/menu-item-2" class="menu-item-parent">Menu item 2
<span class="open"></span>
</a>
<ul class="submenu">
<li><a href="/menu-item-2/subitem1">Sub Item 1</a></li>
<li><a href="/menu-item-2/subitem2">Sub Item 2</a></li>
<li><a href="/menu-item-2/subitem3">Sub Item 3</a></li>
</ul>
</li>
<li>
<a href="/menu-item-1" class="menu-item-parent">Menu item 3
<span class="open"></span>
</a>
<ul class="submenu">
<li><a href="/menu-item-3/subitem1">Sub Item 1</a></li>
<li><a href="/menu-item-3/subitem2">Sub Item 2</a></li>
<li><a href="/menu-item-3/subitem3">Sub Item 3</a></li>
</ul>
</li>
</ul>