如何使用JavaScript切换Ionicons图标的name属性实现菜单切换？

你之前的代码错误在于操作了元素的class，但Ionic图标是通过name属性来控制显示哪个图标的，所以得修改这个属性而不是class。

正确的做法是在toggleMenu函数里判断当前图标的name值，切换成对应的图标名称：

function toggleMenu() {
    // 切换图标name属性
    if (menu.name === 'menu-sharp') {
        menu.name = 'close-sharp';
    } else {
        menu.name = 'menu-sharp';
    }
    // 保留你原来的导航栏切换逻辑
    navLinks.classList.toggle('top-[14%]');
}

完整的代码示例：

HTML部分：

<ion-icon name="menu-sharp" class="text-3xl cursor-pointer"></ion-icon>
<!-- 确保navLinks元素存在并能被正确获取 -->
<div class="navLinks">导航链接区域</div>

JavaScript部分：

const menu = document.querySelector('ion-icon');
const navLinks = document.querySelector('.navLinks'); // 匹配你的navLinks选择器

menu.addEventListener('click', () => {
    console.log('clicked')
    toggleMenu()
})

function toggleMenu() {
    // 用三元运算符简化切换逻辑
    menu.name = menu.name === 'menu-sharp' ? 'close-sharp' : 'menu-sharp';
    navLinks.classList.toggle('top-[14%]');
}

这样点击图标时，就能在菜单图标和关闭图标之间切换，同时保留你原本的导航栏显示/隐藏逻辑。

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