基于JavaScript与TailwindCSS的日期选择器切换按钮代码优化咨询

我正在用JavaScript和TailwindCSS制作日期选择器的切换按钮，点击.date-picker-container元素来显示/隐藏.dates-container容器。目前用带else语句的JS实现了切换功能，但不确定写法是否规范，也想了解有没有更简洁高效的实现方式，附上我的HTML和JavaScript代码：

HTML代码 #

<div class="col-start-4 col-end-7 ... bg-slate-500">
    <div class="mb-6"> <!-- Date and Time Part -->
        Date
        <div class="date-time-container">
            <div class="date-picker-container relative max-w-xs h-16 bg-red-400 cursor-pointer select-none">
                <div class="selected-date w-full h-16 text-center flex items-center">16/7/2023</div>
                <div class="dates-container bg-lime-600 absolute w-full top-16 left-0 invisible">
                    <div class="month flex justify-between">
                        <div class="arrows prev-month">&lt;</div>
                        <div class="month-item">July 2023</div>
                        <div class="arrows next-month">&gt;</div>
                    </div>
                    <div class="days-container"></div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript代码 #

const date_picker_el = document.querySelector(".date-picker-container");
const days_el = document.querySelector(".dates-container");

function toggleDatePicker(e){
    if(days_el.classList.contains("invisible")){
        days_el.classList.remove("invisible");    
        days_el.classList.add("active:visible");
    }else{
        days_el.classList.remove("active:visible");
        days_el.classList.add("invisible");
    }
}

date_picker_el.addEventListener("click", toggleDatePicker);

1. 修正Tailwind类的错误使用 #

你代码里的active:visible是Tailwind的伪类语法，仅在元素处于active状态（比如点击按住时）生效，不能直接作为普通类添加。应该用visible类配合invisible类来控制显示切换。

2. 用classList.toggle()简化切换逻辑 #

原生JS的classList.toggle()方法可以直接实现类的切换，无需写if-else判断，代码更简洁高效：

const date_picker_el = document.querySelector(".date-picker-container");
const days_el = document.querySelector(".dates-container");

function toggleDatePicker() {
    days_el.classList.toggle("invisible");
}

date_picker_el.addEventListener("click", toggleDatePicker);

一行代码就完成了显示/隐藏的核心逻辑，清晰且性能更优。

3. 可选：添加点击外部关闭功能（提升体验） #

如果需要优化用户体验，可以增加点击页面其他区域自动关闭日期选择器的功能：

const date_picker_el = document.querySelector(".date-picker-container");
const days_el = document.querySelector(".dates-container");

function toggleDatePicker() {
    days_el.classList.toggle("invisible");
}

// 点击外部区域关闭选择器
document.addEventListener("click", (e) => {
    if (!date_picker_el.contains(e.target)) {
        days_el.classList.add("invisible");
    }
});

date_picker_el.addEventListener("click", (e) => {
    e.stopPropagation(); // 阻止事件冒泡，避免触发外部关闭逻辑
    toggleDatePicker();
});

4. 修复HTML拼写错误 #

你的HTML里有个笔误：<div class="days=container"></div>应该改成<div class="days-container"></div>，避免样式失效。

内容的提问来源于stack exchange，提问作者Brango