Question

我的垂直菜单遇到问题而不是悬停我需要使用onclick打开子菜单，点击后必须打开菜单，它应该以最大高度进行转换。我试图解决这个问题，但我无法解决任何人可以帮助我解决这个问题？我是否需要使用javascript或者我可以使用CSS解决它，我不明白请帮助我。

*{padding:0px;margin:1px;margin-top:-0.01em;margin-left:-0.05em;margin-right:0.1em;border-radius:8px;}
    body{font:16px/1 Times;background-color:#FAFCFD;}
    nav.vertical{position:absolute;background:#5798B4;}
    nav.vertical ul{list-style: none;}
    nav.vertical ul ul{position:relative;}
    nav.vertical li{position:relative;}
    nav.vertical a{display:inherit;color:#FFF;font-weight:bold;text-decoration:none;padding:8px 12px;transition:2.5s;}
    nav.vertical li:hover > a{background:#FAFCFD;font-weight:bold;color:#000;}
    nav.vertical ul ul{background:rgba(0,0,0,0.01);padding-left:20px;transition: max-height 2.2s ease-out;max-height:0;overflow:hidden;}
    nav.vertical li:hover > ul{max-height:500px;transition: max-height 2.5s ease-in;}

    <nav class="vertical">
		<ul>
			<li><a href="#">Configuration +</a>
				<ul>
					<li><a href="#">IP Configuration +</a>
						<ul>
							<li><a href="#">Address Config +</a>
								<ul>
									<li><a href="#">LAN IP</a></li>
									<li><a href="#">WAN IP</a></li>
									<li><a href="#">L2TP IP</a></li>
								</ul>
							</li>
							<li><a href="#">NAT +</a>
								<ul>
									<li><a href="#">NAT</a></li>
									<li><a href="#">IPv4v6 Static Mapping</a></li>	
									<li><a href="#">Port Forwarding</a></li>
								</ul>
							</li>
							<li><a href="#">WiZ/RTU Port Mapping</a></li>
							<li><a href="#">Management Config</a></li>
							<li><a href="#">IPSec VPN +</a>
								<ul>
									<li><a href="#">IPSec Configuration</a></li>
									<li><a href="#">Tunnel Configuration</a></li>	
								</ul>
							</li>
							<li><a href="#">L2TP VPN</a></li>
						</ul>
					</li>
					<li><a href="#">Dial Up +</a>
						<ul>
							<li><a href="#">Dial Up Params</a></li>
							<li><a href="#">Dial Up Scripts +</a>
								<ul>
									<li><a href="#">Modem Init Commands</a></li>
									<li><a href="#">Dial Out Commands</a></li>
									<li><a href="#">Hang Up Commands</a></li>
									<li><a href="#">SMS Commands</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">PPP</a></li>
					<li><a href="#">SMS +</a>
						<ul>
							<li><a href="#">SMS</a></li>
							<li><a href="#">Source Mobile Number</a></li>
							<li><a href="#">SMS Alarm Parameter</a></li>
						</ul>
					</li>
					<li><a href="#">Date & Time</a></li>
					<li><a href="#">Log +</a>
						<ul>
							<li><a href="#">Log Params</a></li>
							<li><a href="#">Log Event</a></li>
							<li><a href="#">Log Upload</a></li>
						</ul>
					</li>
					<li><a href="#">External Network +</a>
						<ul>
							<li><a href="#">Ext. N/W Connection</a></li>
							<li><a href="#">Target IP</a></li>
						</ul>
					</li>
					<li><a href="#">SNMP +</a>
						<ul>
							<li><a href="#">System</a></li>
							<li><a href="#">Trap</a></li>
						</ul>
					</li>
					<li><a href="#">DTU +</a>
						<ul>
							<li><a href="#">DTU Application</a></li>
							<li><a href="#">RS232</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">System Control +</a>
				<ul>
					<li><a href="#">Save</a></li>
					<li><a href="#">Reboot</a></li>
					<li><a href="#">Factory Defaults</a></li>
					<li><a href="#">Change Password</a></li>
					<li><a href="#">System Maintenance</a></li>
				</ul>
			</li>
			<li><a href="#">Diagnostics +</a>
				<ul>
					<li><a href="#">Ping</a></li>
					<li><a href="#">Trace Route</a></li>
				</ul>
			</li>
			<li><a href="#">Status +</a>
				<ul>
					<li><a href="#">System</a></li>
					<li><a href="#">WAN</a></li>
					<li><a href="#">LAN</a></li>
					<li><a href="#">PPP</a></li>
					<li><a href="#">Log Status +</a>
						<ul>
							<li><a href="#">Show All Logs</a></li>
							<li><a href="#">Show Logs From</a></li>
						</ul>
						<li><a href="#">Cell Info.</a></li>
						<li><a href="#">VPN Status</a></li>
					</li>
				</ul>
			</li>
			<li><a href="#">Traps +</a>
				<ul>
					<li><a href="#">Generic</a></li>
				</ul>
			</li>
			<li><a href="#">Quick Config</a></li>
			<li><a href="#">Exit</a></li>
		</ul>
	</div>
</nav>

Answer 1

尝试从以下位置更改此行：

nav.vertical li:hover > ul{max-height:500px;transition: max-height 2.5s ease-in;}

到

nav.vertical li:active > ul, nav.vertical li:focus > ul{max-height:500px;transition: max-height 2.5s ease-in;}

Answer 2

遗憾的是，纯CSS无法实现。你可以考虑使用JS。

我建议您使用类.clicked而不是:hover使用该类。然后，您可以使用一些更改标记的代码向onclick元素添加li个事件：

<li onclick="this.className='clicked'">...</li>

Answer 3

使用css鼠标伪类无法实现您想要的效果，此机制涉及鼠标淹没时的切换开关，输入类型复选框可以提供您所需的内容。

<INPUT type="checkbox">

该复选框仅用于提供您需要的UI功能 - 切换用户想要导航到的UI部分。

单选按钮可用于类似的用户体验。

通过单击切换，可以在不经常创建复杂状态机的情况下实现效果

您可以使用label元素将鼠标效果与任何输入元素相关联：

<LABEL TYPE='checkbox' ID='clientCheckbox1' />
<LABEL FOR='clientCheckbox1'>IP Configuration</LABEL>
<UL>
Submenu content here.
</UL>

可以通过这种方式设置原始帖子中菜单导航的每个<A>代码设置 - 在没有JavaScript的情况下实现效果。

点击复选框后，通过初始化trasition，下面的CSS将达到所需的效果。

〜/ +兄弟选择器分别拾取所有/相邻的silbling。

INPUT:checked~UL{
   max-height:500px;
   Transition: max-height:2.5s ease-in
}
INPUT~UL {
   max-height:0;
   transition: max-height 2.2s ease-out
}

单击垂直菜单而不是悬停

3 个答案: