Question

也许这很容易，但我仍然无法找到解决方案。我尝试使用下拉菜单箭头从互联网上关注示例。问题是所有子菜单都向下（显示），而应该只显示点击菜单的子菜单。

<html>
    <head>
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <style>
                .sub-menu ul > li {
                    z-index:-1;
                    opacity:0;
                    display:none;
                }

                .drop {
                  display: inline-block;
                  transition: all .25s
                }

                .slicknav_nav.active li > .drop {
                  transform: rotate(180deg)
                }

                .slicknav_nav.active li > .sub-menu > ul > li{
                    z-index:1;
                    opacity:1;
                    display:block;
                }

        </style>
    </head>
    <body>
        <div class="slicknav_menu">
            <ul class="slicknav_nav">
                <li>
                    <a href="#">Movies</a>
                    <a class="drop">▼</a>
                    <div class="sub-menu">
                        <ul>
                            <li><a href="#">In Cinemas Now</a></li>
                            <li><a href="#">Coming Soon</a></li>
                            <li><a href="#">On DVD/Blu-ray</a></li>
                            <li><a href="#">Showtimes &amp; Tickets</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">Movies2</a>
                    <a class="drop">▼</a>
                    <div class="sub-menu">
                        <ul>
                            <li><a href="#">In Cinemas Now</a></li>
                            <li><a href="#">Coming Soon</a></li>
                            <li><a href="#">On DVD/Blu-ray</a></li>
                            <li><a href="#">Showtimes &amp; Tickets</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <script>
            $(".slicknav_nav").click(function() {
                $(this).hasClass("active") ?
                $(".slicknav_nav").removeClass("active") :
                ($(".slicknav_nav").removeClass("active"), $(this).addClass("active"));
            });
        </script>
    </body>
</html>

有人可以解决问题吗？我希望它不会改变结构。

Answer 1

您的代码中有几个问题：

在li上添加点击处理程序，而不是ul。
在active上切换li课程。
在点击处理程序中，从所有active中删除li类，然后只需添加到当前li。

更新代码：

$(".slicknav_nav li").click(function() {
    $(".slicknav_nav li").removeClass('active');
    $(this).addClass('active');
});

.sub-menu {
  z-index: -1;
  opacity: 0;
  display: none;
}

.drop {
  display: inline-block;
  transition: all .25s;
}

.slicknav_nav li.active > .drop {
  transform: rotate(180deg);
}

.slicknav_nav li.active > .sub-menu {
  z-index: 1;
  opacity: 1;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slicknav_menu">
  <ul class="slicknav_nav">   
    <li>
      <a href="#">Movies</a><a class="drop">▼</a>
      <div class="sub-menu">
        <ul>
          <li><a href="#">In Cinemas Now</a></li>
          <li><a href="#">Coming Soon</a></li>
          <li><a href="#">On DVD/Blu-ray</a></li>
          <li><a href="#">Showtimes &amp; Tickets</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">Movies2</a><a class="drop">▼</a>
      <div class="sub-menu">
        <ul>
          <li><a href="#">In Cinemas Now</a></li>
          <li><a href="#">Coming Soon</a></li>
          <li><a href="#">On DVD/Blu-ray</a></li>
          <li><a href="#">Showtimes &amp; Tickets</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

Fiddle DEMO

带箭头的下拉菜单

1 个答案: