w3css - 下拉菜单中的可靠下拉菜单
使用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,下拉-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
我认为你正在试图建立多级菜单,我创建了一个小提琴看看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>
是的,这就是我想要的!唯一的区别是“Bar Baz”和“Baz Foo”都应该下降。 能否通过在我的代码中找出问题来帮助我实现这一目标?我不想改变w3.css的外观和感觉 –
您能为我创作一个小提琴吗? –
https://jsfiddle.net/sonali9696/ndpatnvt/ 请在这里找到提琴@Manoj –
你可以请一个工作的小提琴或片段。 – codesayan
那可能是由于你的HTML结构。如果你想要所有的按钮都是同一个“级别”的项目,那么你的结构可能应该反映 - 通过在同一级别有三个独立的元素,而你嵌套2和3的下拉为1。 – CBroe
@CBroe我不喜欢在同一级别上不需要dropdown-1,2,3。我想要2和3下1就像在用户界面。但是,我不希望链接1和链接2仅在点击下拉菜单2或点击下拉菜单3时出现。它不应该出现只是悬停在下拉菜单上-1 –