使按钮默认打开答案

【问题标题】：Make button toggle on by default使按钮默认打开
【发布时间】：2022-10-14 18:47:02
【问题描述】：

我有一个项目详细信息菜单，我想默认打开它，我是编码新手，但我认为改变它的唯一方法是编码。我想我发现了一些需要更改的相关代码：

php:

                    <a href="#" id="toggle-project-info" class="btn-lg project-toggle w-100 d-lg-flex justify-content-end">
                    <span class="more-info-text"> <?php _e('Meer projecten'); ?></span>
                    <i class="ml-3 fal fa-angle-up fa-2x text-white"></i>
                </a>

js：

        if (projectDetailToggle.on('click', function (e) {
            e.preventDefault();
            body.toggleClass('project-detail-open');
        })
    );

更多js：

  var projectDetailToggle = $('#toggle-project-info');

更多的PHP：

    <script>
    (() => {
        const button = document.querySelector('#toggle-project-info');
        if (!button) {
            return;
        }
        
        window.addEventListener('load', () => button.click());
    })();
</script>

我希望这是足够的信息，当菜单默认打开时，仍然需要一个选项来关闭它。

如有遗漏请追问！

【问题讨论】：

标签： javascript php wordpress button toggle

【解决方案1】：

您只需要编写指示相应元素中的活动切换的类。

例如。

const swit = document.querySelector('.switch');
const slider = document.querySelector('.slider');

swit.addEventListener('click', () => {
  
  swit.classList.toggle('switch-active');
  slider.classList.toggle('slider-active');

});

.switch {
  width: 90px;
  height: 30px;
  background: #F00;
}

.slider {
  width: 35px;
  height: 20px;
  background: #00F;
  float: left;
  border: 5px solid #000
}

.switch-active {
  background: #0F0;
}

.slider-active {
  float: right;
}

<!--initialize the active switch from here-->
<div class="switch switch-active">
  <div class="slider slider-active"></div>
</div>

【讨论】：