HTML Jquery .toggle没有切换回来

Question

 <div class="row">
    <div class="col one-whole">
        <nav class="top-nav">
            <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="work/central.html">Central Plumping</a></li>
            <li><a href="work/roofing.html">Roof</a></li>
            <li><a href="work/drains.html">Drainage</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="contact.html">Contact</a></li>
            <a href="../index.html"><img src="img/title.png"></a>
            </ul>
        </nav>
        <nav class="burger-nav">
            <ul>
                <li><a href="" id="toggleburger"><i class="fa fa-bars x3" aria-hidden="true"></i></a></li>
                <li><a href="../index.html"><img src="img/title.png"></a></li>
            </ul>
        </nav>
     </div>
    </div>
    <div class="burger">
     <div class="row menu">
        <div class="col one-whole">
            <ul>
            <li><a href="index.html">Home</a><a href="" id="toggleburger"><i class="fa fa-times x3" aria-hidden="true"></i></a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="work/central.html">Central Plumping</a></li>
            <li><a href="work/roofing.html">Roof</a></li>
            <li><a href="work/drains.html">Drainage</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

大家好,目前正在尝试学习基本的JQuery.我设法创建了一个简单的导航栏,具有响应式汉堡菜单,可以根据屏幕大小隐藏和显示每个导航栏.然后我创建了一个汉堡div,它在显示时固定为100%屏幕尺寸,但目前设置为display:none.现在我已经让我的切换工作显示它,但当我尝试关闭菜单栏时,它似乎没有切换回来.任何帮助都会很棒.

我的Jquery脚本如下:

<script>
    $(document).ready(function(){
        $("#toggleburger").click(function(){
            $(".menu").toggle();
        });
    });
</script>

Answer 1

我想你的问题是你正在使用带有空href属性的锚标签.

尝试进入

<a href="javascript:void(0);" id="toggleburger"><i class="fa fa-times x3" aria-hidden="true"></i></a>

请参阅此FIDDLE中的示例