w3css - 下拉菜單中的可靠下拉菜單

-1

使用w3.css功能，我試圖編寫一個HTML程序來創建級聯下拉菜單，其幫助文檔爲this教程。w3css - 下拉菜單中的可靠下拉菜單

我的代碼如下：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
    <title>Query Control Panel</title> 
</head> 
<body> 
<div class="w3-bar w3-black"> 
    <a href="#" class="w3-bar-item w3-button">abc</a> 
    <div class="w3-dropdown-hover"> 
     <button class="w3-button">dropdown-1</button> 
     <div class="w3-dropdown-content w3-card-4"> 
      <div class="w3-bar w3-light-gray"> 
       <div class="w3-dropdown-click"> 
        <button class="w3-button">dropdown-2</button> 
        <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-right"> 
         <a href="#" class="w3-bar-item w3-button">link-1</a> 
         <a href="#" class="w3-bar-item w3-button">link-2</a> 
        </div> 
       </div> 
      </div> 
      <div class="w3-dropdown-click"> 
       <button class="w3-button">dropdown-3</button> 
       <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-left"> 
        <a href="#" class="w3-bar-item w3-button">link-3</a> 
        <a href="#" class="w3-bar-item w3-button">link-4</a> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

輸出：當我將鼠標懸停在下拉-1，將要來下下拉-2和下下拉-3分別與元件，出現不懸停或點擊。

下面的圖像示出了我正在輸出時我的鼠標在下拉-1：

所需的輸出：當我懸停我的鼠標下拉-1，下拉-2和dropdown- 3應該出現。當我點擊下拉菜單-2時，只有鏈接1和鏈接2應該出現。同樣，對於下拉3。

小提琴

請找到在小提琴使用的fiddle這裏

外部資源： https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js 和 https://www.w3schools.com/w3css/4/w3.css

來源

2017-06-13 Sonali Agrawal

你可以請一個工作的小提琴或片段。 – codesayan

那可能是由於你的HTML結構。如果你想要所有的按鈕都是同一個「級別」的項目，那麼你的結構可能應該反映 - 通過在同一級別有三個獨立的元素，而你嵌套2和3的下拉爲1。 – CBroe

@CBroe我不喜歡在同一級別上不需要dropdown-1,2,3。我想要2和3下1就像在用戶界面。但是，我不希望鏈接1和鏈接2僅在點擊下拉菜單2或點擊下拉菜單3時出現。它不應該出現只是懸停在下拉菜單上-1 –

我認爲你正在試圖建立多級菜單，我創建了一個小提琴看看this

<ul class="nav site-nav"> 
    <li> 
     <a href=#>Lorem</a> 
    </li> 
    <!-- 
--> 
    <li> 
     <a href=#>Ipsum</a> 
    </li> 
    <!-- 
--> 
    <li class=flyout> 
     <a href=#>Dolor</a> 
     <!-- Flyout --> 
     <ul class="flyout-content nav stacked"> 
      <li> 
       <a href=#>Foo Bar</a> 
      </li> 
      <li> 
       <a href=#>Bar Baz</a> 
      </li> 
      <li class="flyout-alt"> 
       <a href=#>Baz Foo</a> 
       <!-- Flyout --> 
       <ul class="flyout-content nav stacked"> 
        <li> 
         <a href=#>Foo Bar</a> 
        </li> 
        <li> 
         <a href=#>Bar Baz</a> 
        </li> 
        <li class="flyout-alt"> 
         <a href=#>Baz Foo</a> 
         <!-- Flyout --> 
         <ul class="flyout-content nav stacked"> 
          <li class="flyout-alt"> 
           <a href=#>Foo Bar</a> 
           <!-- Flyout --> 
           <ul class="flyout-content nav stacked"> 
            <li> 
             <a href=#>Bar Baz</a> 
            </li> 
            <li class="flyout-alt"> 
             <a href=#>Baz Foo</a> 
             <!-- Flyout --> 
             <ul class="flyout-content nav stacked"> 
              <li> 
               <a href=#>Bar Baz</a> 
              </li> 
              <li> 
               <a href=#>Baz Foo</a> 
              </li> 
              <li> 
               <a href=#>Foo Bar</a> 
              </li> 
             </ul> 
            </li> 
            <li> 
             <a href=#>Foo Bar</a> 
            </li> 
            <li> 
             <a href=#>Foo Bar</a> 
            </li> 
           </ul> 
          </li> 
          <li> 
           <a href=#>Bar Baz</a> 
          </li> 
          <li class="flyout-alt"> 
           <a href=#>Baz Foo</a> 
           <!-- Flyout --> 
           <ul class="flyout-content nav stacked"> 
            <li> 
             <a href=#>Bar Baz</a> 
            </li> 
            <li> 
             <a href=#>Baz Foo</a> 
            </li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul>

來源

2017-06-13 10:29:30

是的，這就是我想要的！唯一的區別是「Bar Baz」和「Baz Foo」都應該下降。能否通過在我的代碼中找出問題來幫助我實現這一目標？我不想改變w3.css的外觀和感覺 –

您能爲我創作一個小提琴嗎？ –

https://jsfiddle.net/sonali9696/ndpatnvt/ 請在這裏找到提琴@Manoj –

w3css - 下拉菜單中的可靠下拉菜單

回答

相關問題