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

【问题标题】：how to toggle css attribute with stimulus js如何使用刺激 js 切换 css 属性
【发布时间】：2021-05-28 18:45:05
【问题描述】：

我在使用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"

我在哪里添加课程？谢谢

【问题讨论】：

标签： ruby-on-rails stimulusjs

【解决方案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>

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

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

【讨论】：