Question

我正在创建一个响应式多级下拉导航栏。我有多个同名的人。我只想切换一个但是jquery效果全部。有一个按钮，其中包含＆＃34;切换 - 下拉＆＃34;对于每个

，它具有另一个导航级别。

我的代码是：

HTML

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news" class="has-children">News</a>
  <button class="dropdown-toggle" aria-expanded="false">expand child menu</button>
    <ul class="sub-menu">

        <li><a href="#contact">Contact</a></li>
        <li><a href="#about" class="has-children">About</a>
        <button class="dropdown-toggle" aria-expanded="false">expand child menu</button>
            <ul class="sub-menu">

                <li><a href="#contact">Contact</a></li>
                <li><a href="#about">About</a></li>
            </ul>

        </li>
    </ul>
  </li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

CSS：

ul 
{
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li 
{
    border-top: 1px solid #d1d1d1;
    position: relative;
}

ul a 
{
    margin-right: 56px;
    color: #1a1a1a;
    display: block;
    line-height: 1.3125;
    outline-offset: -1px;
    padding: 0.84375em 0;
    text-decoration: none;
}

.dropdown-toggle 
{
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #1a1a1a;
    content: "";
    height: 48px;
    padding: 0;
    position: absolute;
    right: 0;
    text-transform: none;
    top: 0;
    width: 48px;
}


.sub-menu
{
    display:block;
    padding-left:20px;
}


.dropdown-toggle 
{ 

    right:0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #1a1a1a;
    height: 48px;
    padding: 0;
    position: absolute;
    right: 0;
    text-transform: none;
    top: 0;
    width: 48px;
}

Jquery的：

<script>
$(document).ready(function(){

    $(".dropdown-toggle").click(function()
    {
        $(".sub-menu").toggle(1000);
    });
});
</script>

Answer 1

您可以使用.sibilings()或.next()方法：

$(".dropdown-toggle").click(function(){
    $(this).next(".sub-menu").toggle(1000);
    // or
    // $(this).siblings(".sub-menu").toggle(1000);
});

由于类名选择器始终返回所有元素的集合。因此，在您的情况下，点击一个button会展开所有.sub-menu列表。

现在，您必须使用.siblings()或.next()方法过滤它们以获取兄弟元素。

Answer 2

您可以使用.next（）方法。在“下拉 - 切换”类的兄弟之后立即返回。通过提到具体的课程。它返回特定类的特定div。您可以在下面的url - ＆gt;中了解有关.next（）方法的更多信息。 jquery next

复制以下javascript代码：

<script>
$(document).ready(function(){

    $(".dropdown-toggle").click(function()
    {
         $(this).next(".sub-menu").toggle(1000);
    });
});
</script>

在具有相同类的多个实例中仅切换一个<ul>

2 个答案: