【发布时间】：2019-07-19 23:11:23
【问题描述】：
我有自定义下拉菜单。大多数工作都是使用 css 完成的。通过添加删除 ui-dropdown-expanded 类来打开/关闭此下拉列表
这是我所有的代码
$(document).on('click', '#ResponseFilter', function() {
$(this).find('ul').toggleClass('ui-dropdown-expanded');
});.reviews-filter.ui-dropdown {
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-repeat-x: ;
background-repeat-y: ;
background-size: auto;
border-bottom-color: rgb(210, 210, 210);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(210, 210, 210);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(210, 210, 210);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(210, 210, 210);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(42, 100, 150);
cursor: pointer;
display: block;
float: left;
font-family: "Proxima Nova";
font-size: 14px;
font-stretch: normal;
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: normal;
height: 30px;
line-height: 20px;
margin-bottom: 7px;
margin-left: 0px;
margin-right: 10px;
margin-top: 7px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
position: relative;
text-size-adjust: 100%;
vertical-align: baseline;
width: 200px;
word-break: keep-all;
word-wrap: break-word;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ui-dropdown:hover {
cursor: pointer;
}
.ui-dropdown {
background: #2D72A7;
color: #fff;
padding: 6px 10px;
margin: 7px 10px 7px 0;
border: 1px solid #2D72A7;
border-radius: 3px;
position: relative;
font-size: 14px;
}
.fl {
float: left !important;
}
.fr {
padding-top: 0;
float: right !important;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
margin-top: -1px;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded {
display: block;
background: #1a4d74;
color: #fff;
position: absolute;
left: -1px;
right: -1px;
top: 31px;
border: 1px solid #113958;
text-align: center;
box-shadow: 0 2px rgba(0, 0, 0, 0.15);
}
.ui-dropdown ul {
display: none;
z-index: 2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li {
border-left: 1px solid #D2D2D2;
border-right: 1px solid #D2D2D2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li {
border-bottom: 1px solid #113958;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li label {
color: #2a6496;
text-align: left;
display: block;
padding: 0 10px;
line-height: 22px;
text-transform: none;
font-size: 14px;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li label {
padding-top: 10px;
padding-bottom: 10px;
color: #000;
margin: 0;
cursor: pointer;
}
.ui-dropdown ul li label {
font-weight: normal;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ResponseFilter" class="ui-dropdown fl reviews-filter" style="width: 200px;">
<div class="fl">
<span id="response-filter-selected-value">All Responses Types</span>
</div>
<div class="fr" data-filter="response">
<i class="fa fa-caret-down"></i>
<ul class="ui-dropdown-expanded">
<li>
<label for="response-filter-allresponsetypes">All Responses Types</label>
</li>
<li>
<label for="response-filter-postedresponses">Posted Responses</label>
</li>
<li>
<label for="response-filter-responserequired">Response Required</label>
</li>
</ul>
</div>
</div>在sn-p中，和jsFiddle有点不同（不知道为什么导致代码一样）
所以问题 - 在 FF 中，特别是在下拉按钮和下拉列表之间有一些空间，这使得下拉关闭，导致用户丢失 :hover:
在图像上，有一些指针可以让用户看到下拉列表而不是......
这个问题是因为边距、填充还是什么？ 谢谢。
【问题讨论】：
-
你真正想要的
:hover工作正常。 -
@MerajKhan，在我的例子中有一些空间，松散的
:hover...我认为这可能是因为margin或padding，但它不是...这是一个非常小的空间......很难找到那个地方......但它存在 -
从
.ui-dropdown类中删除边距
标签： javascript jquery html css drop-down-menu