Jquery 将菜单字符更改为x

我已经创建了一个响应菜单后，一些教程在互联网上

 <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>

我想在男人们关门的时候这样做，≡符号，但当我打开它时，我想将它变成一个x

我该如何做这件事？

使用以下方法：

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

---

希望这有帮助。

您可以修改单击处理程序中

图标的
文本（）。试试这个：

$('.menu_button').click(function(e) {        
    $("#menu").stop(true).slideToggle(function() {
        $(this).find('.icon').text(function(i, val) {
            return val === 'x' ? '≡' : 'x';
        });
    });
});

这是另一种方式，切换类以使用CSS
转换：


jQuery（文档）.ready（函数（）{
$（'.菜单按钮'）。单击（功能（e）{
$（this.toggleClass（'open'）；
$（“#菜单”）.slideToggle（）；
});
});
a.菜单按钮{
显示：内联块；
}
#菜单{
显示：无；
}
.图标{
光标：指针；
}
.菜单\按钮。打开{
高度：30px；
}
.menu_按钮。打开。图标范围：第n个子项（1），.menu_按钮。打开。图标范围：第n个子项（3）{
变换：平移（0px，13px）旋转（-45度）scalex（1.3）；
保证金：0；
}
.menu_按钮。打开。图标范围：第n个子项（2）{
身高：0；
保证金：0；
}
.menu_按钮。打开。图标范围：第n个子项（3）{
变换：平移（0px，9px）旋转（45度）scalex（1.3）；
}
.图标跨度{
背景：#1d1b；
显示：块；
宽度：30px；
高度：4px；
边界半径：5px；
边缘底部：5px；
-webkit过渡：所有0.5s线性；
过渡：所有0.3s线性；
}









谢谢你，伙计！有效：）等10分钟，我接受你的建议answer@untruste很高兴我能帮助你。干杯。动画完成后，你应该设置逻辑，我说guess@A.Wolff很好，更新了。还添加了
stop（）
，以防止多次单击使动画排队。这很有帮助，可能不是一个完整的解决方案，也可能不是最好的解决方案，但它很有效。不，它不起作用！如果你在slideToggle中提到回调，你是对的，但是我没有更新我的答案，因为还有很多答案。当我发布这个解决方案时，没有其他的答案。。。同意
：P
我是西班牙人，我认为我们正在努力学习新的语言，所以我很自豪能用英语交谈和写作，人们理解我。
$('.menu_button').click(function(e) {
    $("#menu").slideToggle();
    $(this).find('.icon').html("x");
});

$('.menu_button').click(function(e) {        
    $("#menu").stop(true).slideToggle(function() {
        $(this).find('.icon').text(function(i, val) {
            return val === 'x' ? '≡' : 'x';
        });
    });
});