Question

您好我正在尝试开发下拉框列表。我能够开发它。当我点击下拉列表时，所有选项将从左侧开始，如下所示

＆＃13;

window.onload = function() {
  $(".btn-toggle").on("click", function() {

    $('.dropdown-menu').toggleClass('open');
  });
  $(".dropdown-menu li").on("click", function() {

    $('.btn-toggle').text($(this).text());
    $('.dropdown-menu').removeClass('open');
  });
}

＆＃13;

.dropdown-header {
  background: #DCDCDC;
  margin-left: 124px;
  background: no-repeat;
  background-position: right top;
  width: 151px;
  background-image: url(https://softwareui.abb.com/DOWNLOADS/icons/svgControls/UI_ControlComponent_CaretDown_16.svg);
  -webkit-text-fill-color: black;
  background-color: lightgrey;
}

.dropdown-menu {
  font-family: ABBvoice;
  font-weight: normal;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 150px;
  max-height: 600px;
  overflow-x: visible;
  overflow-y: visible;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  background-color: #FFFFFF;
  border-radius: 0;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #464646;
  transition: all .3s;
  transform: translate(-100%);
}

.checkbox-inline:active {
  background-color: #2E92FA;
}

.dropdown-menu.open {
  transform: translate(0%);
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group">
  <button class="btn-toggle dropdown-header" type="button">Select User Role</button>
  <ul class="dropdown-menu" role="menu" style="width:100%; border:#000000">
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox17">Sensors</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox18">Actuators</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox19">Digital inputs</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">

        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox20">Outputs</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox21">Converters</label>
      </div>
    </li>
  </ul>
</div>

＆＃13;

每当我点击下拉列表时，所有选项都应立即在按钮下方打开有人可以帮助我做这项工作吗？任何帮助，将不胜感激。感谢

Answer 1

问题是你在css中使用tranform和transition，不确定你期望的是什么，因为它正如他们所描述的那样执行转换。

您可以通过删除.dropdown-menu

中的这两行来摆脱这些转换

transition: all .3s;
transform: translate(-100%);

并将.dropdown-menu.open更改为此

.dropdown-menu.open {
    display:none
}

更新剪辑

＆＃13;

window.onload = function() {
  $(".btn-toggle").on("click", function() {

    $('.dropdown-menu').toggleClass('open');
  });
  $(".dropdown-menu li").on("click", function() {

    $('.btn-toggle').text($(this).text());
    $('.dropdown-menu').removeClass('open');
  });
}

＆＃13;

.dropdown-header {
  background: #DCDCDC;
  margin-left: 124px;
  background: no-repeat;
  background-position: right top;
  width: 151px;
  background-image: url(https://softwareui.abb.com/DOWNLOADS/icons/svgControls/UI_ControlComponent_CaretDown_16.svg);
  -webkit-text-fill-color: black;
  background-color: lightgrey;
}

.dropdown-menu {
  font-family: ABBvoice;
  font-weight: normal;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 150px;
  max-height: 600px;
  overflow-x: visible;
  overflow-y: visible;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  background-color: #FFFFFF;
  border-radius: 0;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color: #464646;
}

.checkbox-inline:active {
  background-color: #2E92FA;
}

.dropdown-menu.open { 
  display: none
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group">
  <button class="btn-toggle dropdown-header" type="button">Select User Role</button>
  <ul class="dropdown-menu" role="menu" style="width:100%; border:#000000">
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox17">Sensors</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox18">Actuators</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox19">Digital inputs</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">

        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox20">Outputs</label>
      </div>
    </li>
    <li>
      <div style="margin-left:3px">
        <label style="margin-left:2px; margin-right:30px;" class="checkbox-inline" for="inlineCheckbox21">Converters</label>
      </div>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

你可以直接使用带有dropwdown的bootstrap按钮组，这样它就会自动在按钮下方打开。

https://getbootstrap.com/docs/3.3/components/#btn-dropdowns-single

对于下拉列表的滑动动画，请尝试使用此代码。

.open > .dropdown-menu {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);  

}
.open > .dropdown-menu li a {
  color: #000;  
}
.dropdown-menu li a{
  color: #fff;
}
.dropdown-menu {
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-animation-fill-mode: forwards;  
  animation-fill-mode: forwards; 
  -webkit-transform: scale(1, 0);
  display: block;

  transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
}
.dropup .dropdown-menu {
  -webkit-transform-origin: bottom;
  transform-origin: bottom;  
}

.navbar .nav > li > .dropdown-menu:after {

}
.dropup > .dropdown-menu:after {
  border-bottom: 0;
  border-top: 6px solid rgba(39, 45, 51, 0.9);
  top: auto;
  display: inline-block;
  bottom: -6px;
  content: '';
  position: absolute;
  left: 50%;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

如何防止从左到右打开？

2 个答案: