jquery - 将菜单字符更改为 x

Question

我按照互联网上的一些教程创建了一个响应式菜单

 <a class="menu_button"  href="#"><span class="icon">≡</span> </a>
    <div id='menu'>
        <nav>
            <ul>
                <li><a href="link">LINK1</a></li>
                <li><a href="link">lINK2</a></li>
                <li><a href="link">LINK3</a></li>
                <li><a href="link">LINK4</a></li>
                <li><a href="link">LINK5</a></li>
                <li><a id="selected" href="link">LINK6</a></li>
            </ul>
        </nav>
    </div>

当用户按下链接并使用此脚本时显示的菜单

jQuery(document).ready(function() {
    $('.menu_button').click(function(e) {
    //    $("#menu").toggleClass("show");
        $("#menu").slideToggle();
    });
});

我想在菜单关闭时执行此操作，其中有 ≡ 符号，但当我打开它时，我想将其变成 x。

我该如何做这件事？

Answer 1

使用这个:

jQuery(document).ready(function() {
    $('.menu_button').click(function(e) {
        $("#menu").slideToggle();
        if ($("#menu").is(":visible"))
            $(this).find(".icon").text("×");
        else
            $(this).find(".icon").text("≡");
    });
});