javascript - 单击下拉按钮时侧边栏下拉菜单不会打开

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>

当我尝试单击"file"下拉按钮时，没有显示相应的容器菜单。

我在这里做错了什么？我希望得到一些帮助。提前致谢!

Answer 1

好的，

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

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

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

3. 当您使用像 VueJS 这样的库时，DOM 会在您更新状态时重新呈现，因此如果您直接修改 HTML 内容，更改将在下一次更新后丢弃

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

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

您还需要删除“已安装”函数中的所有内容。事件应与 HTML 组件上的 @eventname 一起使用，如果您希望导航栏默认打开，请使用默认状态。

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