如何使用刺激 js 切换 css 属性

问题描述

我在使用stimulus.js 定位css 属性时遇到问题

我想在单击图标时将显示 flex 切换为 none 和 flex

display:flex 

#css

.dropnav{
  display:flex
}

#hide_controller

......
static targets = [ "hide" ]
static classes =["display"]
        
connect() {
this.hideTarget.classList.add(this.displayClass)}
toggle(){
 this.hideTarget.classList.toggle(this.displayClass)}
.....

#html

 ....
  <li class="nav_items" data-controller="toggle" > 
      <a href=""  data-action="toggle#toggle" ><i class="far fa-user-circle fa-2x "></i></a>
                            
          <div class="dropnav" data-toggle-display-class="display" data-toggle-target="hide">
                 <a href="" class="drop_down_items" ></a>
                  <a href="" class="drop_down_items">Links</a>
                    .......  

错误提示

Error: Missing attribute "data-toggle-display-class"

我在哪里添加课程？ 谢谢

解决方法

data-toggle-display-class="display" 应该放在定义控制器的相同元素上。所以在你的情况下：

<li class="nav_items" data-controller="toggle" data-toggle-display-class="display"> 
      <a href=""  data-action="toggle#toggle" ><i class="far fa-user-circle fa-2x "></i></a>
                            
          <div class="dropnav" data-toggle-target="hide">
                 <a href="" class="drop_down_items" ></a>
                  <a href="" class="drop_down_items">Links</a>

然后在您的 css 中隐藏或显示如下元素：

.nav_items {
  .dropnav {
    display: none;
  }
  &.display {
    .dropnav {
      display: flex;
    }
  }
}