我正在使用 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>当我尝试单击"file"下拉按钮时，没有显示相应的容器菜单。
我在这里做错了什么？我希望得到一些帮助。提前致谢!
最佳答案
好的，
我在你的代码中看到了很多东西，
在您的模板中，您永远不需要使用关键字“this”，您所做的一切都已经在组件范围内。
不需要加'open === true'，'open'就够了
当您使用像 VueJS 这样的库时，DOM 会在您更新状态时重新呈现，因此如果您直接修改 HTML 内容，更改将在下一次更新后丢弃
删除它并更喜欢使用条件样式
sideBar[0].style.width = "200px";
您还需要删除“已安装”函数中的所有内容。 事件应与 HTML 组件上的 @eventname 一起使用，如果您希望导航栏默认打开，请使用默认状态。
修复所有这些问题将使您的代码更加清晰，并有很大的机会让您的代码正常工作
关于javascript - 单击下拉按钮时侧边栏下拉菜单不会打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54966527/