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("&times;");
        else
            $(this).find(".icon").text("≡");
    });
});

Answer 2

$('.menu_button').click(function(e) {
    $("#menu").slideToggle();
    $(this).find('.icon').html("x");
});

希望这有帮助。

Answer 3

您可以修改点击处理程序中text()的{{1}}。试试这个：

.icon

Answer 4

这是另一种方法，切换类以使用CSS transition：

＆＃13;

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

＆＃13;

a.menu_button {
    display: inline-block;
}
#menu {
    display: none;
}
.icon {
    cursor: pointer;
}
.menu_button.open {
    height: 30px;
}
.menu_button.open .icon span:nth-child(1), .menu_button.open .icon span:nth-child(3) {
    transform: translate(0px, 13px) rotate(-45deg) scalex(1.3);
    margin: 0;
}
.menu_button.open .icon span:nth-child(2) {
    height: 0;
    margin: 0;
}
.menu_button.open .icon span:nth-child(3) {
    transform: translate(0px, 9px) rotate(45deg) scalex(1.3);
}
.icon span {
    background: #1d1d1b;
    display: block;
    width: 30px;
    height: 4px;
    border-radius: 5px;
    margin-bottom: 5px;
    -webkit-transition: all 0.5s linear;
    transition: all 0.3s linear;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="menu_button"  href="#"><span class="icon"><span></span>
    <span></span>
    <span></span></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>

＆＃13;

src： https://stackoverflow.com/a/25845803/1414562

将菜单字符更改为x

4 个答案: