问题：
当单击空白时，下拉菜单将被激活
陶乐生
如何确保只有在单击箭头或名称时才激活下拉列表。 我试着看过类似的问题，但对我来说不起作用。 如果我点击“商店”旁边的任何地方，下拉菜单将被激活。
这是密码。 你可以从代码中看到，光标在“Shop”的水平线的任何地方都改变为手，无论是左还是右。
编辑了代码以包含内联块
null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!-- Popper for drop down menus -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Load bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" style="display:inline-block;" href="#" data-toggle="dropdown">Shop</a>
<div class="dropdown-menu p-0">
<div class="d-flex flex-wrap flex-md-nowrap px-2">
<div class="mega-dropdown-column py-4 px-3">
<div class="widget widget-links mb-3">
<h6 class="font-size-base mb-3">Shop layouts</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-ls.html">Shop
Grid - Left Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-rs.html">Shop
Grid - Right Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-ft.html">Shop
Grid - Filters on Top</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-ls.html">Shop
List - Left Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-rs.html">Shop
List - Right Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-ft.html">Shop
List - Filters on Top</a></li>
</ul>
</div>
<div class="widget widget-links">
<h6 class="font-size-base mb-3">Marketplace</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-category.html">Category Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-single.html">Single Item Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-vendor.html">Vendor Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-cart.html">Cart</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-checkout.html">Checkout</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column py-4 px-3">
<div class="widget widget-links">
<h6 class="font-size-base mb-3">Shop pages</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-categories.html">Shop Categories</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-single-v1.html">Product Page v.1</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-single-v2.html">Product Page v.2</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-cart.html">Cart</a>
</li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-details.html">Checkout - Details</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-shipping.html">Checkout - Shipping</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-payment.html">Checkout - Payment</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-review.html">Checkout - Review</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-complete.html">Checkout - Complete</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="order-tracking.html">Order Tracking</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="comparison.html">Product
Comparison</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column py-4 pr-3">
<div class="widget widget-links mb-3">
<h6 class="font-size-base mb-3">Grocery store</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-catalog.html">Product Catalog</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-single.html">Single Product Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-checkout.html">Checkout</a></li>
</ul>
</div>
<a class="d-block" href="#"><img src="img/shop/menu-banner.jpg" alt="Promo banner"></a>
</div>
</div>
</div>
</li>
</body>
</html>null
共有3个答案
拓拔辰钊
第一个选项是:为dropdown类设置position:absolute；。
null
.dropdown,.dropleft,.dropright,.dropup{
position:absolute!important;
}
.nav-link{
padding:0!important;
margin-left:10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!-- Popper for drop down menus -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Load bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Shop</a>
<div class="dropdown-menu p-0">
<div class="d-flex flex-wrap flex-md-nowrap px-2">
<div class="mega-dropdown-column py-4 px-3">
<div class="widget widget-links mb-3">
<h6 class="font-size-base mb-3">Shop layouts</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-ls.html">Shop
Grid - Left Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-rs.html">Shop
Grid - Right Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-ft.html">Shop
Grid - Filters on Top</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-ls.html">Shop
List - Left Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-rs.html">Shop
List - Right Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-ft.html">Shop
List - Filters on Top</a></li>
</ul>
</div>
<div class="widget widget-links">
<h6 class="font-size-base mb-3">Marketplace</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-category.html">Category Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-single.html">Single Item Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-vendor.html">Vendor Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-cart.html">Cart</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-checkout.html">Checkout</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column py-4 px-3">
<div class="widget widget-links">
<h6 class="font-size-base mb-3">Shop pages</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-categories.html">Shop Categories</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-single-v1.html">Product Page v.1</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-single-v2.html">Product Page v.2</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-cart.html">Cart</a>
</li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-details.html">Checkout - Details</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-shipping.html">Checkout - Shipping</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-payment.html">Checkout - Payment</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-review.html">Checkout - Review</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-complete.html">Checkout - Complete</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="order-tracking.html">Order Tracking</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="comparison.html">Product
Comparison</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column py-4 pr-3">
<div class="widget widget-links mb-3">
<h6 class="font-size-base mb-3">Grocery store</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-catalog.html">Product Catalog</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-single.html">Single Product Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-checkout.html">Checkout</a></li>
</ul>
</div>
<a class="d-block" href="#"><img src="img/shop/menu-banner.jpg" alt="Promo banner"></a>
</div>
</div>
</div>
</li>
</body>
</html>
谢志文
将display:inline-blockCSS添加到a标记中。
例如:
<a style="display: inline-block;" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Shop</a>
用于切换下拉菜单的a标记正在扩展到全宽。 所以你需要缩小它。
晋涛
谢谢Rishabh和Ken的回答
如果您将padding设置为零并显示:inline-block，它解决了我的问题
null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!-- Popper for drop down menus -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Load bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<li class="nav-item dropdown text-center"><a class="nav-link dropdown-toggle" style="padding:0; display:inline-block" href="#" data-toggle="dropdown">Shop</a>
<div class="dropdown-menu p-0">
<div class="d-flex flex-wrap flex-md-nowrap px-2">
<div class="mega-dropdown-column py-4 px-3">
<div class="widget widget-links mb-3">
<h6 class="font-size-base mb-3">Shop layouts</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-ls.html">Shop
Grid - Left Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-rs.html">Shop
Grid - Right Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-grid-ft.html">Shop
Grid - Filters on Top</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-ls.html">Shop
List - Left Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-rs.html">Shop
List - Right Sidebar</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-list-ft.html">Shop
List - Filters on Top</a></li>
</ul>
</div>
<div class="widget widget-links">
<h6 class="font-size-base mb-3">Marketplace</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-category.html">Category Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-single.html">Single Item Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-vendor.html">Vendor Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-cart.html">Cart</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="marketplace-checkout.html">Checkout</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column py-4 px-3">
<div class="widget widget-links">
<h6 class="font-size-base mb-3">Shop pages</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-categories.html">Shop Categories</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-single-v1.html">Product Page v.1</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-single-v2.html">Product Page v.2</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="shop-cart.html">Cart</a>
</li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-details.html">Checkout - Details</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-shipping.html">Checkout - Shipping</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-payment.html">Checkout - Payment</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-review.html">Checkout - Review</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="checkout-complete.html">Checkout - Complete</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="order-tracking.html">Order Tracking</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="comparison.html">Product
Comparison</a></li>
</ul>
</div>
</div>
<div class="mega-dropdown-column py-4 pr-3">
<div class="widget widget-links mb-3">
<h6 class="font-size-base mb-3">Grocery store</h6>
<ul class="widget-list">
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-catalog.html">Product Catalog</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-single.html">Single Product Page</a></li>
<li class="widget-list-item pb-1"><a class="widget-list-link" href="grocery-checkout.html">Checkout</a></li>
</ul>
</div>
<a class="d-block" href="#"><img src="img/shop/menu-banner.jpg" alt="Promo banner"></a>
</div>
</div>
</div>
</li>
</body>
</html>
类似资料：
-
问题内容： 我需要建立一个包含5个选项的菜单，单击某个菜单后，将出现一个新的子菜单。我完全不知道该怎么做。 问题答案： CSS没有点击处理程序。因此，不可能使用标准CSS。您可以使用一种称为“复选框hack”的方法，但是我谦虚地认为，它有点笨拙，并且会像您的用例要求那样在导航菜单中使用，这很尴尬。因此，我建议使用jQuery或Javascript。这是使用jQuery的一种非常简单的解决方案。 基
-
我有在下拉列表中选择每个选项的测试用例，但无论我目前做什么，我都会遇到这个错误。 结果消息：系统。InvalidOperationException:元素在点（1170.0333251953125405.4250030517578）处不可单击，因为另一个元素遮挡了它 目前正试图用这个代码改变年份 - WebElement是这样定义的 这是selenium尝试选择拾取时下拉列表的样子。我看不到任何东
-
我正在尝试制作一个下拉菜单，其中。单击时会显示下拉内容，如果用户单击栏中的任何其他下拉列表，下拉内容将消失。问题是我有多个下拉列表，我想我只是需要帮助修改我现有的javascript。我希望侧边栏（nav）只显示当前活动的下拉菜单。在“我的代码”上，当您打开下拉列表时，它仍然会打开，直到用户再次单击下拉箭头以关闭该特定下拉列表。
-
我试图创建下拉菜单，点击打开。这是通过添加类到class elements，基本上显示菜单。到目前为止，一切正常，但我真的不明白当用户单击打开的菜单之外的任何地方时，如何关闭打开的下拉菜单。到目前为止，我的代码如下所示： 注意：当用户单击打开的菜单时，该菜单不应关闭。只有当用户在打开的菜单外单击时，它才应关闭。 我如何使用普通的Javascript做到这一点？感谢任何帮助。
-
问题内容： 我有一个Twitter Bootstrap下拉菜单。正如所有Twitter Bootstrap用户所知，单击（甚至在其中单击）时，关闭菜单。 为避免这种情况，我可以轻松地在下拉菜单上附加一个click事件处理程序，只需添加著名的即可。 但是，这看起来很简单，而且是非常普遍的行为，而且由于（以及）事件处理程序都委派给了对象，因此这些元素（上 一个/下一个 控件，…）上的事件将被“忽略”。
-
我有一个Twitter引导下拉菜单。正如所有Twitter引导用户都知道的那样，下拉菜单会在点击时关闭（甚至在其中点击）。 为了避免这种情况，我可以很容易地在下拉菜单上附加一个click事件处理程序，并简单地添加著名的。 但是，这看起来很简单，也是一种非常常见的行为，而且由于（以及)事件处理程序被委托给对象，因此这些元素（Prev/Next controls,...）上的事件将被“忽略”。 依赖T
-
我正在使用可点击的下拉菜单进行导航。下拉列表使用输入标记。我陷入困境的地方是，如果访问者单击页面上的其他地方，我需要关闭下拉列表。我正在尝试使用目标属性、matches（）方法和onclick事件。 我在控制台中注意到的是，当我打开下拉列表时，两个条件语句都出现了，下拉列表没有打开。这就好像下拉列表同时打开和关闭。 我做错了什么？我如何让它正常工作，以便用户只需打开下拉菜单，并在单击网页上的其他位
-
嗨，我正在尝试自动启动下拉菜单。默认情况下，它的可见性是隐藏的。将鼠标悬停在它上面时，它的可见性属性显示为可见。我可以单击下拉菜单，但是在单击下拉菜单后，我的selenium脚本不能从下拉菜单中选择值。 错误：线程"main"org.openqa.selenium.ElementNotVisibleException异常：无法单击元素 HTML代码段