当按钮设置为显示时，位置引导程序下拉列表：无

时间：2020-05-14 19:58:37

标签： javascript html css vue.js bootstrap-4

说明

在VueJS中，我试图通过单击一个单词以编程方式打开Bootstrap下拉菜单。 我希望菜单显示在鼠标的正下方。

问题

问题是-当我在显示下拉菜单的按钮上设置display: none;时，菜单显示在左上角。我发现solutions用于HTML，但是我很难将它们重写为VueJS。

最小的工作示例

我当前的代码段如下所示：（单击单词“ click”或删除display: none;）

new Vue({
  el: '#vue-app',
  methods: {
    toggleTest: function(e) {
      e.stopPropagation();
      console.log(this.$refs.clickWord);
      this.$refs.clickWord.click();
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="vue-app">

  <div class="container">

    <div class="row">
      <div class="col-6">
        A column.
      </div>
      <div class="col-6">
        You should <span v-on:click="toggleTest" onMouseOver="this.style.background='#AFF'" onMouseOut="this.style.background='#FFF'">click</span> a word.

        <div class="dropdown" id="word0">
          <button id="ete" style="display:none" ref="clickWord" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </button>
          <div class="dropdown-menu" style="top:100 !important; left:100; position: absolute;">
            <span class="dropdown-item-text">Dropdown item text</span>
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

2 个答案:

答案 0 :(得分：1)

将下拉菜单的按钮设置为display: none的问题在于，好像该按钮不再是DOM的一部分，并且下拉菜单使用该按钮的位置来定位自己。

如果将按钮设置为opacity: 0，则可以避免此问题。它仍然是不可见的，但是下拉菜单知道它仍然存在。

带有一些调整样式的下拉按钮：

<button id="ete"
        style="opacity:0; height:0; position:absolute; top:-16px"
        ref="clickWord"
        class="btn btn-secondary dropdown-toggle"
        type="button"
        data-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"></button>

工作片段：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="vue-app">

  <div class="container">

    <div class="row">
      <div class="col-6">
        A column.
      </div>
      <div class="col-6">
        You should
        <span v-on:click="toggleTest"
          onMouseOver="this.style.background='#AFF'"
          onMouseOut="this.style.background='#FFF'">click</span>
        a word.

        <div class="dropdown" id="word0">
          <button id="ete"
          style="opacity:0; height:0; position:absolute; top:-16px"
          ref="clickWord" class="btn btn-secondary dropdown-toggle"
          type="button" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false"></button>
          <div class="dropdown-menu"
            style="top:100 !important; left:100; position: absolute;">
            <span class="dropdown-item-text">Dropdown item text</span>
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>


<script>
new Vue({
  el: '#vue-app',
  methods: {
    toggleTest: function(e) {
      e.stopPropagation();
      // console.log(this.$refs.clickWord);
      this.$refs.clickWord.click();
    }
  }
});
</script>

答案 1 :(得分：1)

以display:none;交易opacity: 0; max-height: 0;padding:0;似乎可以解决问题。

还请注意，您正在加载两个不同版本的Vue，这可能会导致意外行为。

但是，它仍然不是一个很好的解决方案。正确的解决方案是将<span>元素视为下拉按钮，并删除类似按钮的样式。

为什么？因为下拉列表是相对于当前父级（即文本段落）定位的。因此它将始终与左侧对齐。至于垂直位置，只要触发元素位于下拉列表正上方的行中，它将是正确的。如果它们之间发生任何环绕，则下拉列表将显示得太低。

所以我认为这是正确的做法：

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#vue-app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div id="vue-app">
  <div class="container">
    <div class="row">
      <div class="col-6">
        A column.
      </div>
      <div class="col-6">
        You should <span onMouseOver="this.style.background='#AFF'" onMouseOut="this.style.background='#FFF'" class="dropdown">
          <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                click
          </span>
          <div class="dropdown-menu">
            <span class="dropdown-item-text">Dropdown item text</span>
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </span> a word.
      </div>
    </div>
  </div>
</div>

相关问题
最新问题