Javascript 响应导航-单击时如何更改菜单图标

我正在使用此响应菜单：

我想对导航系统进行以下两个小小的改进，但我似乎不知道该怎么做：

1：单击菜单图标时，我希望该图标更改为其他图标。准确地说，我只希望菜单图标（3行）在单击时垂直翻转。当我将光标悬停在翻转的图标上时，我想要标题：“关闭菜单”

2：我还希望在单击菜单外部时关闭菜单。我已经完成了建议，但是当菜单图标未显示时，给出的建议也会关闭菜单

jQuery:

$(function() {
    var pull       = $('#pull');
        menu       = $('.nav-top ul');
        menuHeight = menu.height();
    $(pull).on('click', function(e) {
        e.stopPropagation();
        e.preventDefault();
        menu.slideToggle();
    });
    $(document).on('click',function(e){
        if(!menu.is(":hidden")){
            menu.slideToggle();
        }
    });
    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

a#pull{display:none}
@media all and (min-width: 150px) and (max-width: 319px) { 
    .nav-top ul {
        display: none;
        height: auto;
        width: 100%
    }
    .nav-top li {
        width: 100%
    }
    .nav-top a {
        width: 100%;
        text-align: left;
        text-indent: 5px;
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979
    }
    .nav-top a#pull {
        background-color: #283744;
        display: block;
        position: relative;
        width: 100%
    }
    .nav-top a#pull:after {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAJklEQVQ4y2P8//8/AzUB438qmzhCDWQYeQaOJpvRZDMay0M/2QAA9B1Hzdwz85IAAAAASUVORK5CYII=)no-repeat;
        content: "";
        display: inline-block;
        height: 30px;
        position: absolute;
        right: 0;
        top: 10px;
        width: 22px
    }
}

CSS:

$(function() {
    var pull       = $('#pull');
        menu       = $('.nav-top ul');
        menuHeight = menu.height();
    $(pull).on('click', function(e) {
        e.stopPropagation();
        e.preventDefault();
        menu.slideToggle();
    });
    $(document).on('click',function(e){
        if(!menu.is(":hidden")){
            menu.slideToggle();
        }
    });
    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

a#pull{display:none}
@media all and (min-width: 150px) and (max-width: 319px) { 
    .nav-top ul {
        display: none;
        height: auto;
        width: 100%
    }
    .nav-top li {
        width: 100%
    }
    .nav-top a {
        width: 100%;
        text-align: left;
        text-indent: 5px;
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979
    }
    .nav-top a#pull {
        background-color: #283744;
        display: block;
        position: relative;
        width: 100%
    }
    .nav-top a#pull:after {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAJklEQVQ4y2P8//8/AzUB438qmzhCDWQYeQaOJpvRZDMay0M/2QAA9B1Hzdwz85IAAAAASUVORK5CYII=)no-repeat;
        content: "";
        display: inline-block;
        height: 30px;
        position: absolute;
        right: 0;
        top: 10px;
        width: 22px
    }
}

编辑1：

JQUERY

$(function() {
            var pull    = $('.pull');
            menu        = $('.nav-top ul');
            menuHeight  = menu.height();

            $(pull).on('click', function(e) {
                e.stopPropagation();
                e.preventDefault();
                menu.slideToggle();
            });if(pull.is(':visible')){
            $(document).on('click',function(e){
                if(!menu.is(":hidden")){
                    menu.slideToggle();
                }
            });}

            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                    pull.addClass('.vertical');
                }else {
    pull.removeClass('vertical');}

            });
        });

html

<nav class="nav-top clearfix">
<ul class=clearfix>
<li><a class="home-link" href="/">Home</a></li>
<li><a class="biography-link" href="/biography">Biography</a></li>
<li><a class="music-link" href="/music">Music</a></li>
<li><a class="gallery-link" href="/gallery">Gallery</a></li>
<li><a class="agenda-link" href="/agenda">Agenda</a></li>
<li><a class="contact-link" href="/contact">Contact</a></li>
</ul>
<a href="#" class="pull" title="Open Menu">Menu</a>
<a href="#" class="pull" title="Close Menu">Menu</a>
</nav>

单击完成后，可以添加一个类

$(pull).on('click', function(e) { pull.addClass('.vertical') $（拉动）。打开（'点击'，函数（e）{ pull.addClass（“.vertical”） 然后编辑垂直类：

.yourbutton .vertical { ... float: left; height: 18px; margin-right: 5px; margin-top: 1px; width: 2px;} .你的按钮.垂直的{ ... 浮动：左； 高度：18px； 右边距：5px； 页边顶部：1px； 宽度：2px；} 您必须删除该类，因此此代码比第一个代码更好：

if(!menu.is(":hidden")){ pull.addClass('.vertical'); } else { pull.removeClass('vertical'); } 如果（！menu.is（“：hidden”））{ pull.addClass（'.vertical'）； }否则{ 拉动。移除类（“垂直”）； } 最后，添加一个属性title:a href“#”title=“Close menu”id=“pull”

仅当“拉动”可见时制作动画：

if(pull.is(':visible')){ // Do your stuff } if（pull.is（'：visible'））{ //做你的事 } 然后，您的css文件应该如下所示：

#pull{display:none;} @media only screen and (max-width : 320px) { #pull{display:block} } #拉动{显示：无；} @仅介质屏幕和（最大宽度：320px）{ #拉{显示：块} } 希望它能帮助你

---

我已经照你说的做了，但是关闭菜单按钮总是显示在打开菜单按钮的下面。第二种解决方案只有在窗口宽度为