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

Question

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

我想将显示 Flex 切换为无，并在单击图标时显示 Flex

display:flex 

#css

.dropnav{
  display:flex
}

#隐藏控制器

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

我在哪里添加课程？谢谢

Answer 1

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

然后在你的CSS中隐藏或显示元素，例如：

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