单击下拉按钮时，侧边栏下拉菜单未打开

Question

我正在使用VueJS和Bootstrap开发应用程序。

我创建了一个边栏。 侧边栏具有文件，电子邮件，社交，应用程序数据等选项。

补充工具栏的代码如下所示：

 export default { data(){ return{ open: false } }, methods:{ toggle(){ const sideBar = document.getElementsByClassName("side-bar"); if(this.open === true){ this.open = false; sideBar[0].style.width = "200px"; } else if(this.open === false){ this.open = true; sideBar[0].style.width = "73px"; } } }, mounted(){ this.open = false; this.toggle(); var dropdown = document.getElementsByClassName("dropdown-btn"); console.log(dropdown); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } } } 

 .openbtn:focus{ outline: none; } /* .sidebar-footer{ position: absolute; width: 197px; height: 41px; bottom: 0; background: #3F51B5; transition: 0.5s; } */ .sidebar:after, body > .navbar-collapse:after{ background: linear-gradient(to bottom, #F5F5F5 0%, #F5F5F5 100%) } .sidebar .sidebar-wrapper .sidenav { height: 100%; width: 200px; z-index: 1; top: 0; left: 0; background-color: #F5F5F5; overflow-x: hidden; padding-top: 20px; transition: 0.5s; } /* Style the sidenav links and the dropdown button */ .sidenav a, .dropdown-btn { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 20px; color: #818181; display: block; border: none; background: none; width:100%; text-align: left; cursor: pointer; outline: none; transition: 0.5s; } /* On mouse-over */ .sidenav a:hover, .dropdown-btn:hover { color: #E91E63; border: 0px; transition: 0.5s; } /* Add an active class to the active dropdown button */ .active { color: #E91E63; transition: 0.5s; } /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */ #dropdown-container { display: none; background-color: #FAFAFA; transition: 0.5s; } /* Optional: Style the caret down icon */ .fa-caret-down { float: right; padding-top: 2px; padding-right: 60px; } .sidebar .sidebar-wrapper .sidenav { padding-top: 75px; transition: 0.5s; } .fa { width: 1.28571429em; text-align: center; transition: 0.5s; } .openbtn { padding: 0px 25px 0px 20px; background-color: #F5F5F5; border: none; outline: none; margin-top: 13px; margin-bottom: 28px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div class="sidebar"> <div class="sidebar-wrapper"> <div class="sidenav"> <button v-if="open === true" @click="toggle" class="openbtn"> <svg x="25px" y="85px" width="24px" height="26px" viewBox="0 0 50 50" style="transform: scaleX(1);" fill="rgb(33,33,33)"> <path d="M0,39h50v2H0V39z M0,26h50v-2H0V26z M0,9v2h50V9H0z"></path> </svg> </button> <button v-else @click="toggle" style="float: right" class="openbtn"> <svg width="26px" height="25px" viewBox="0 0 32 32"> <g id="icomoon-ignore"></g> <path d="M29.312 15.992c0-7.366-5.97-13.337-13.337-13.337s-13.337 5.97-13.337 13.337 5.97 13.337 13.337 13.337 13.337-5.97 13.337-13.337zM3.706 15.992c0-6.765 5.504-12.27 12.27-12.27s12.27 5.505 12.27 12.27-5.505 12.27-12.27 12.27c-6.765 0-12.27-5.505-12.27-12.27z" fill="#000000"/> <path d="M12.792 15.231l-0.754 0.754 6.035 6.035 0.754-0.754-5.281-5.281 5.256-5.256-0.754-0.754-3.013 3.013z" fill="#000000"/> </svg> </button> <div v-if="this.open === false"> <button class="dropdown-btn" style="font-size: 16px; outline: none"> <i class="far fa-fw fa-file"></i><span style="color: #212121"> Files</span> <i class="fa fa-caret-down" style="color: #080404"></i> </button> <div id="dropdown-container"> <a href="#" style="font-size: 16px;"><i class="far fa-fw fa-clock"></i> Recent</a> <a href="#" style="font-size: 16px;"><i class="far fa-fw fa-star"></i> Starred</a> <a href="#" style="font-size: 16px;"><i class="fa fa-fw fa-share-alt"></i> Shared with me</a> <a href="#" style="font-size: 16px;"><i class="far fa-fw fa-clock"></i> Shared by me</a> <a href="#" style="font-size: 16px;"><i class="fa fa-fw fa-trash"></i> Trash</a> </div> <button class="dropdown-btn" style="font-size: 16px; outline: none"> <i class="far fa-fw fa-envelope-open"></i><span style="color: #212121"> Email</span> <i class="fa fa-caret-down" style="color: #080404"></i> </button> <div id="dropdown-container"> </div> <button class="dropdown-btn" style="font-size: 16px; outline: none"> <i class="fa fa-fw fa-bullhorn" style="width: 1.28571429em"></i><span style="color: #212121"> Social</span> <i class="fa fa-caret-down" style="color: #080404"></i> </button> <div id="dropdown-container"> </div> <button class="dropdown-btn" style="font-size: 16px; outline: none"> <i class="fa fa-fw fa-database"></i><span style="color: #212121"> App Data</span> <i class="fa fa-caret-down" style="color: #080404"></i> </button> <div id="dropdown-container"> </div> </div> </div> </div> </div> 

当我尝试单击“文件”下拉按钮时，没有出现相应的容器菜单。

我在这里做什么错？ 我希望对此有所帮助。 提前致谢！

Answer 1

好吧

我在您的代码中看到了很多东西，

1. 在模板内部，您不需要使用关键字“ this”，而您所做的一切都已经在组件范围内。

2. 您不需要添加'open === true'，'open'就足够了

3. 当您使用VueJS之类的库时，在更新状态时会重新呈现DOM，因此，如果您直接修改HTML内容，则更改将在下次更新后被放弃

删除它，并喜欢使用条件样式

sideBar[0].style.width = "200px";

您还需要删除“已挂载”功能内的所有内容。 如果您想在默认情况下打开导航栏，则事件应与HTML组件上的@eventname一起使用，并使用默认状态。

修复所有这些问题将使您的代码更清晰，并且有很大的机会使您的代码正常工作