下拉开关也应该是一个链接
我用BS4设置了一个下拉开关。鼠标悬停时，下拉菜单可以很好地向下滑动。但现在，产品所有者希望将切换按钮作为可单击的链接（在我的示例中：href=”https://www.yahoo.com).但我不知道如何做到这一点。有解决办法吗？或者更容易将切换菜单重新构建为其他菜单，之后将链接从滑动div（或其他）中分离出来？
这是我的切换，到目前为止我有什么：
html {
font-family: Arial;
font-size: 1.4rem;
line-height: 1.4rem;
}
.dropdown {
display: inline-block;
padding: 0 7px;
}
.dropdown.show {
background-color: rgba(255, 255, 255, 0.9);
}
.dropdown a::before {
content: "";
}
.dropdown a.dropdown-toggle {
cursor: pointer;
padding: 3px 7px;
}
.dropdown a.dropdown-toggle::after {
font-size: 1.4rem;
content: ">";
color: Orange;
line-height: 1.4rem;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
vertical-align: top;
transition: 0.5s;
}
.dropdown a.dropdown-toggle:active {
pointer-events: none;
}
.dropdown a.dropdown-toggle:hover:after {
transform: rotate(90deg);
}
.dropdown .dropdown-menu {
min-width: initial;
padding: 0.5rem;
margin: 0;
margin-left: 7px;
font-size: initial;
border-radius: 0;
transition: all 0.5s;
overflow: hidden;
transform-origin: top center;
transform: scale(1, 0);
display: block;
border: none;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.dropdown .dropdown-menu a.dropdown-item {
font-size: 1.4rem;
line-height: 1.6rem;
text-decoration: none;
}
.dropdown .dropdown-menu a.dropdown-item:hover {
color: Orange;
}
.dropdown:hover .dropdown-toggle {
background-color: rgba(255, 255, 255, 0.9);
}
.dropdown:hover .dropdown-menu {
transform: scale(1);
}
.dropdown-menu:hover + a:after {
transform: rotate(90deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sub1</a>
<a class="dropdown-item" href="#">Sub2</a>
<a class="dropdown-item" href="#">Sub3</a>
</div>
<a class="dropdown-toggle" href="http://www.yahoo.com" data-toggle="dropdown">
MAIN
</a>
</div>共有1个答案
使用bootstrap的属性和类阻止了这一点。例如，data-toggle="dropdown"和。dropdown-toggle，因为它们与框架绑定在一起。
除了指针事件：无。
html {
font-family: Arial;
font-size: 1.4rem;
line-height: 1.4rem;
}
.dropdown {
display: inline-block;
padding: 0 7px;
}
.dropdown.show {
background-color: rgba(255, 255, 255, 0.9);
}
.dropdown a::before {
content: "";
}
.dropdown a.cc-dropdown-toggle {
cursor: pointer;
padding: 3px 7px;
text-decoration: none;
}
.dropdown a.cc-dropdown-toggle::after {
font-size: 1.4rem;
content: ">";
color: Orange;
line-height: 1.4rem;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
vertical-align: top;
transition: 0.5s;
display:inline-block;
}
.dropdown a.cc-dropdown-toggle:hover:after {
transform: rotate(90deg);
}
.dropdown .dropdown-menu {
min-width: initial;
padding: 0.5rem;
margin: 0;
margin-left: 7px;
font-size: initial;
border-radius: 0;
transition: all 0.5s;
overflow: hidden;
transform-origin: top center;
transform: scale(1, 0);
display: block;
border: none;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.dropdown .dropdown-menu a.dropdown-item {
font-size: 1.4rem;
line-height: 1.6rem;
text-decoration: none;
}
.dropdown .dropdown-menu a.dropdown-item:hover {
color: Orange;
}
.dropdown:hover .cc-dropdown-toggle {
background-color: rgba(255, 255, 255, 0.9);
}
.dropdown:hover .dropdown-menu {
transform: scale(1);
}
.dropdown-menu:hover + a:after {
transform: rotate(90deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="dropdown">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sub1</a>
<a class="dropdown-item" href="#">Sub2</a>
<a class="dropdown-item" href="#">Sub3</a>
</div>
<a class="cc-dropdown-toggle" href="http://www.yahoo.com">
MAIN
</a>
</div>
</body>
</html>-
我正在尝试制作一个下拉菜单，其中。单击时会显示下拉内容，如果用户单击栏中的任何其他下拉列表，下拉内容将消失。问题是我有多个下拉列表，我想我只是需要帮助修改我现有的javascript。我希望侧边栏（nav）只显示当前活动的下拉菜单。在“我的代码”上，当您打开下拉列表时，它仍然会打开，直到用户再次单击下拉箭头以关闭该特定下拉列表。
-
根据第一个下拉列表项选择，我希望第二个下拉列表应该包含相关内容。在Java怎么能这样？例如，假设第一个下拉列表包含国家名称，第二个下拉列表包含国家名称。如果我从第一个下拉列表中选择一个特定的国家，比如“印度”，那么第二个列表应该只显示国家的相关邦，即“印度”的邦。并且这两个列表都是动态的。
-
我在Wordpress中有一个文章网格，下面是按类别排序的默认方法： 有办法把这个变成下拉列表吗？我为类似的情况找到了不同的解决方案，但它们都有作为无序列表的好处（ul li）。我的只是一堆链接。
-
问题内容： 在JDBC中使用时，我应该关闭第一个还是第一个？我只是看到一个代码示例，其中先关闭，但是在我看来，先关闭更合乎逻辑。 有没有一种标准的，可以接受的方式来做到这一点？有关系吗？因为和对象直接相关，所以关闭还会导致也会被关闭吗？ 问题答案： 该声明。我希望你能关闭（按顺序） 结果集 该声明 连接 （并在此过程中检查是否为空！） 即以与打开顺序 相反的 顺序关闭。 如果您使用Spring J
-
问题内容： 我需要使用JavaScript根据下拉菜单A中的选择更改下拉菜单B的内容。没有涉及到数据库查询- 我事先知道应该在A中选择B的内容。我已经找到了一些使用AJAX的示例，但是由于没有涉及到数据库查询，所以没有必要。谁能为我指出一些示例代码以实现此目的？ 问题答案： function configureDropDownLists(ddl1, ddl2) {