html - 如何防止从左到右下拉打开？

Question

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

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');
  });
}

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

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

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

Answer 1

问题是您在 css 中使用了 tranform 和 transition，不确定您期望什么，因为它按照描述执行转换。

您可以通过删除 .dropdown-menu 中的这两行来摆脱这些转换

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

并将.dropdown-menu.open改成这个

.dropdown-menu.open {
    display:none
}

更新被截断

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');
  });
}

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

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