Question

我有自定义下拉列表...大部分工作都是使用css完成的。通过添加删除ui-dropdown-expanded类

来打开/关闭此下拉列表

这是我的所有代码

＆＃13;

$(document).on('click', '#ResponseFilter', function() {
  $(this).find('ul').toggleClass('ui-dropdown-expanded');
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在摘录中它与jsFiddle中的有点不同（不知道原因，导致代码相同）

问题 - 在FF中尤其是下拉按钮和下拉列表之间存在一些空间，这会使下拉列表关闭，导致用户丢失:hover:

在图像上有用户可以看到下拉列表的poiners而不是......

这个问题是因为保证金，填充还是什么？感谢。

Answer 1

好吧，问题是因为1px的{{1}}。

将下拉列表提高一点，将margin添加到类-1px;的现有边距，以解决我的问题。

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;
}

.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
  margin-top: -2px;
}

Mozilla FireFox悬停的工作方式与Chrome中的不同

1 个答案: