Question

我是网络开发的初学者。

我正在创建一个小型网站项目，我使用了这个模板W3-Layout。

我有一些小问题，当我尝试为子菜单添加导航栏时，它无法正常工作。

有人知道如何正确地做到这一点吗？

HTML

<div class="top-menu">
<span class="menu"><img src="images/nav-icon.png" alt=""/></span>
<ul>
    <nav class="cl-effect-5">
    <li><a href="index.html" class="active"><span data-hover="Home">home</span></a></li>
    <li><a href="index.html"><span data-hover="About">about</span></a></li>
    <li><a href="#"><span data-hover="Capabilities">Capabilities</span></a>

<ul>
    <li>sub mneu 01</li>
    <li>sub mneu 02</li>
</ul>                   
    </li>       
    <li><a href="#"><span data-hover="contact">contact</span></a></li>
    </nav>
    </ul>
    <div class="clearfix"></div>
    </div>
    <!--script-nav-->
    <script>
        $("span.menu").click(function(){
        $(".top-menu ul").slideToggle("slow" , function(){
        });
        });
    </script>

Answer 1

像这样更新你的代码：

$(".top-menu nav ul li.has-submenu").click(function() {

  $(this).find('.dropdown').slideToggle("slow", function() {});
});

.top-menu {
    float: right;
}
span.menu {
    display: none;
}
.top-menu ul.navbar-links >li {
    display: inline-block;
    padding: 1.2em 0;
}

.top-menu ul.navbar-links >li {
    display: inline-block;
    padding: 1.2em 0;
    position: relative;
}
nav a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}

.top-menu ul li a.active {
    color: #657c93;
}
.top-menu ul li a {
    font-size: 1.2em;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0 0.8em;
    font-weight: 700;
    color: #285568;
}
.top-menu .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-menu">
  <span class="menu"><img src="images/nav-icon.png" alt=""/></span>
  <nav class="cl-effect-5">
    <ul class="navbar-links">
      <li><a href="index.html" class="active"><span data-hover="Home">home</span></a></li>
      <li><a href="index.html"><span data-hover="About">about</span></a></li>
      <li class="has-submenu"><a href="#"><span data-hover="Capabilities">Capabilities</span></a>
        <ul class="dropdown">

          <li>sub mneu 01</li>
          <li>sub mneu 02</li>
        </ul>
      </li>

      <li><a href="#"><span data-hover="contact">contact</span></a></li>
    
    </ul>
   </nav>
  <div class="clearfix"></div>
</div>

Answer 2

尝试使用此代码

$(".top-menu ul nav li").click(function() { //instead of `span`  use `div class` 

  $(".top-menu ul nav li ul").slideToggle("slow", function() {});
});

$(".top-menu ul nav li").click(function() {

  $(".top-menu ul nav li ul").slideToggle("slow", function() {});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-menu">
  <span class="menu"><img src="images/nav-icon.png" alt=""/></span>
  <ul>
    <nav class="cl-effect-5">
      <li><a href="index.html" class="active"><span data-hover="Home">home</span></a></li>
      <li><a href="index.html"><span data-hover="About">about</span></a></li>
      <li><a href="#"><span data-hover="Capabilities">Capabilities</span></a>
        <ul>

          <li>sub mneu 01</li>
          <li>sub mneu 02</li>
        </ul>


      </li>

      <li><a href="#"><span data-hover="contact">contact</span></a></li>
    </nav>
  </ul>
  <div class="clearfix"></div>
</div>

html菜单栏无法添加子菜单

2 个答案: