Position 按钮设置为显示时的引导下拉菜单：无

Question

Description

In VueJS I'm trying to open Bootstrap dropdown menu programmatically by clicking on a word. I want the menu to appear right under the mouse.

The problem

The problem is - when I set display: none; on the button that displays the dropdown, the menu appears on the top left corner. I've found solutions for HTML, but I struggle to rewrite them to VueJS.

Minimal working example

My current snippet looks like this: (click the word "click" or remove 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>

Answer 1

The problem with setting the dropdown's button to display: none is that it's as if the button is no longer part of the DOM, and the dropdown uses the button's position to position itself.

This problem can be avoided if you instead set the button to opacity: 0 . It's still invisible, but the dropdown knows it's still there.

The dropdown button with a few tweaked styles:

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

Working snippet:

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

Answer 2

Trading display:none; for opacity: 0; max-height: 0;padding:0; opacity: 0; max-height: 0;padding:0; seems to do the trick.

Also note you're loading two different versions of Vue, which might cause unexpected behavior.

---

However, it's still not a good enough solution. The proper solution is to treat the <span> element as the dropdown button, removing the button-like styling.

Why? Because the dropdown is positioning itself relative to the current parent, which is the text paragraph. So it will always be aligned to the left side. As for vertical position, it will be correct as long as the trigger element is on the row immediately above the dropdown. If any wrapping occurs in between them, the dropdown will be displayed too low.

So here's what I believe to be the right way of doing it:

 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>