css - 如何在垂直导航栏中创建子导航

Question

我正在尝试在垂直栏中创建一个子导航。这是一个简短的解释:

我已尝试使用我即将用于类(class)的语法，但链接不会激活。

我的 Bootstrap :

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel = "stylesheet" href = "Stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src = "script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

我的 CSS 代码:

   .side-menu-wrapper {
       background: rgba(0,114,187,0.7);
       padding: 40px 0 0 40px;
       position: fixed;
       top: 0;
       right: 0; 
       height: 100%;
       z-index: 2;
       transition: 0.5s;
       width: 250px;
       font: 20px "Courier New", Courier, monospace;
       box-sizing: border-box;  
    }

    .side-menu-wrapper > ul{
        list-style:none;
        padding:0;
        margin:0;
        overflow-y: auto;
        height:95%;   
      }

   .side-menu-wrapper > ul > li > a {
       display: block;
       padding: 6px 4px 6px 4px;
       color: white;
       transition: 0.3s;
       text-decoration: none;
    }

    .side-menu-wrapper > a.menu-close { 
       padding: 8px 0 4px 23px;
       color: white;
       display: block;
       margin: -30px 0 -10px -20px;
       font-size: 35px;    
       text-decoration: none;
     }

    .menu-overlay { 
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.7);
        overflow-y: auto;
        overflow-x: hidden;
        text-align: center;
        opacity: 0;
        transition: opacity 1s;
     }


    .active-item{
        list-style:none;
     }


     .item{
         list-style:none;
         color:white;
      }


     input{
         width: 130px;
     }

我的 HTML 代码:

         <div class="menu-overlay "></div>
            <div id="main-menu" class="side-menu-wrapper">
               <a href="#" class="menu-close">×</a>
                  <ul>
                     <li>
                        <form class="example" action="action_page.php">
                        <input type="text" placeholder="Search.." 
                         name="search">
                           <button type="submit">
                              <i class="fa fa-search"></i>
                          </button>
                         </form>
                     </li>
                     <li>
                        <a href="#" target="_blank" rel="nofollow">
                           Home
                        </a>
                     </li>
                     <li>
                <a href="#sub-menu" class="active" data- 
                 toggle="collapse" data-parent="#main-menu">
                    About
                    <span class="ml-2" style="font-size: 12px;">
                        &#x25BC;
                    </span>
                </a>
                <div class="collapse" id="sub-menu">
                  <ul>
                    <li class = "item" href="#" target="_blank" 
                    rel="nofollow">
                      <a >Introduction</a>
                    </li>
                    <li class = "item" href="#" target="_blank" 
                    rel="nofollow"> 
                      <a >Mission</a>
                    </li>
                    <li class = "item" href="#" target="_blank" 
                     rel="nofollow"> 
                       <a >Vision</a>
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <a href="#sub-menu1" class="active" data- 
                toggle="collapse" data-parent="#main-menu">
                    Courses
                    <span class="ml-2" style="font-size: 12px;">
                        &#x25BC;
                    </span>
                 </a>
                <div class="collapse" id="sub-menu1">
                    <ul>
                        <li href="#sub-menu1.1" class="active-item" 
                         data-toggle="collapse" data-parent="#main- 
                          menu">
                            <a>
                              Diploma in Information Technology
                            </a>
                            <ul class="collapse" id="sub-menu1.1">
                                <li class = "item" href="#" 
                                target="_blank" rel="nofollow">
                                  <a>
                                    Prof.Diploma in IT Support(Hardware)
                                  </a>
                                </li>
                                <li class = "item" href="#" 
                                target="_blank" rel="nofollow">
                                    <a>Prof.Diploma in Software 
                                       Engineering (Programming)
                                     </a>
                                </li>
                                <li class = "item" href="#" 
                                 target="_blank" rel="nofollow">
                                    <a>
                                      Diploma in Videogame Programming
                                    </a>
                                </li>
                                <li class = "item" href="#" 
                                target="_blank" rel="nofollow">
                                    <a>
                                      View All
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>               
                </div>
              </li>
              <li>
                <a href="#" target="_blank" rel="nofollow">Flickr</a>
              </li>
            </ul>
          </div>

如您所见，我正在尝试为我的类(class)链接创建一个子导航，但我不知道。请检查我的 HTML 代码以确保我一切正常。

Answer 1

使用 data-target以 div 为目标你想折叠而不是 data-parent ，我已将 sub-menu1 重命名为 sub-menu2，以便可以清楚地区分它们。

关于折叠组件如何工作的更多信息，请click here .

下面的工作片段:

 .side-menu-wrapper {
       background: rgba(0,114,187,0.7);
       padding: 40px 0 0 40px;
       position: fixed;
       top: 0;
       right: 0; 
       height: 100%;
       z-index: 2;
       transition: 0.5s;
       width: 250px;
       font: 20px "Courier New", Courier, monospace;
       box-sizing: border-box;  
    }

    .side-menu-wrapper > ul{
        list-style:none;
        padding:0;
        margin:0;
        overflow-y: auto;
        height:95%;   
      }

   .side-menu-wrapper > ul > li > a {
       display: block;
       padding: 6px 4px 6px 4px;
       color: white;
       transition: 0.3s;
       text-decoration: none;
    }

    .side-menu-wrapper > a.menu-close { 
       padding: 8px 0 4px 23px;
       color: white;
       display: block;
       margin: -30px 0 -10px -20px;
       font-size: 35px;    
       text-decoration: none;
     }

    .menu-overlay { 
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.7);
        overflow-y: auto;
        overflow-x: hidden;
        text-align: center;
        opacity: 0;
        transition: opacity 1s;
     }


    .active-item{
        list-style:none;
     }


     .item{
         list-style:none;
         color:white;
      }


     input{
         width: 130px;
     }

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel = "stylesheet" href = "Stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src = "script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


  <div class="side-menu-wrapper">
  <a href="#" class="menu-close">×</a>
    <ul>
    <li>
      <form class="example" action="action_page.php">
        <input type="text" placeholder="Search.." 
               name="search">
        <button type="submit">
          <i class="fa fa-search"></i>
        </button>
      </form>
      </li>
      <li>
        <a href="#" target="_blank" rel="nofollow">Home</a>
      </li>
      <li>
        <a href="#sub-menu" class="active" data-toggle="collapse" data-target="#sub-menu">About <span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
        <div class="collapse" id="sub-menu">
          <ul>
            <li class = "item" href="#" target="_blank" rel="nofollow">
              <a >Introduction</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Mission</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Vision</a>
            </li>
          </ul>
        </div>
      </li>
			<li>
        <a href="#sub-menu2" class="active" data-toggle="collapse" data-target="#sub-menu2">Courses <span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
        <div class="collapse" id="sub-menu2">
          <ul>
            <li class = "item" href="#" target="_blank" rel="nofollow">
              <a >Diploma in Information Technology</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Prof.Diploma in IT Support(Hardware)</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Prof.Diploma in Software 
                                       Engineering (Programming)</a>
            </li>
						<li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Diploma in Videogame Programming</a>
            </li>
						<li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >View All</a>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#" target="_blank" rel="nofollow">Flickr</a>
      </li>
    </ul>
  </div>

编辑: 在与 OP 讨论后，这是另一个在子菜单中包含子菜单的示例(以 Mission 子菜单中的 About 链接为例):

 .side-menu-wrapper {
       background: rgba(0,114,187,0.7);
       padding: 40px 0 0 40px;
       position: fixed;
       top: 0;
       right: 0; 
       height: 100%;
       z-index: 2;
       transition: 0.5s;
       width: 250px;
       font: 20px "Courier New", Courier, monospace;
       box-sizing: border-box;  
    }

    .side-menu-wrapper > ul{
        list-style:none;
        padding:0;
        margin:0;
        overflow-y: auto;
        height:95%;   
      }

   .side-menu-wrapper > ul > li > a {
       display: block;
       padding: 6px 4px 6px 4px;
       color: white;
       transition: 0.3s;
       text-decoration: none;
    }

    .side-menu-wrapper > a.menu-close { 
       padding: 8px 0 4px 23px;
       color: white;
       display: block;
       margin: -30px 0 -10px -20px;
       font-size: 35px;    
       text-decoration: none;
     }

    .menu-overlay { 
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,.7);
        overflow-y: auto;
        overflow-x: hidden;
        text-align: center;
        opacity: 0;
        transition: opacity 1s;
     }


    .active-item{
        list-style:none;
     }


     .item{
         list-style:none;
         color:white;
      }


     input{
         width: 130px;
     }

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel = "stylesheet" href = "Stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src = "script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


  <div class="side-menu-wrapper">
  <a href="#" class="menu-close">×</a>
    <ul>
    <li>
      <form class="example" action="action_page.php">
        <input type="text" placeholder="Search.." 
               name="search">
        <button type="submit">
          <i class="fa fa-search"></i>
        </button>
      </form>
      </li>
      <li>
        <a href="#" target="_blank" rel="nofollow">Home</a>
      </li>
      <li>
        <a href="#sub-menu" class="active" data-toggle="collapse" data-target="#sub-menu">About <span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
        <div class="collapse" id="sub-menu">
          <ul>
            <li class = "item" href="#" target="_blank" rel="nofollow">
              <a >Introduction</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a href="#sub-sub-menu" class="active text-decoration-none text-white" data-toggle="collapse" data-target="#sub-sub-menu">Mission <span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
							<div class="collapse" id="sub-sub-menu">
          <ul>
            <li class = "item" href="#" target="_blank" rel="nofollow">
              <a >First mission</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Second mission</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Third mission</a>
            </li>
          </ul>
        </div>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Vision</a>
            </li>
          </ul>
        </div>
      </li>
			<li>
        <a href="#sub-menu2" class="active" data-toggle="collapse" data-target="#sub-menu2">Courses <span class="ml-2" style="font-size: 12px;">&#x25BC;</span></a>
        <div class="collapse" id="sub-menu2">
          <ul>
            <li class = "item" href="#" target="_blank" rel="nofollow">
              <a >Diploma in Information Technology</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Prof.Diploma in IT Support(Hardware)</a>
            </li>
            <li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Prof.Diploma in Software 
                                       Engineering (Programming)</a>
            </li>
						<li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >Diploma in Videogame Programming</a>
            </li>
						<li class = "item" href="#" target="_blank" rel="nofollow"> 
              <a >View All</a>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#" target="_blank" rel="nofollow">Flickr</a>
      </li>
    </ul>
  </div>