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

中的示例

Answer 2

当我点击您尝试将click事件绑定到的元素时，我会被指示关闭。

这是一个工作小提琴：https://jsfiddle.net/p85kazv0/

我只是阻止了您使用默认操作的a元素（这当然是指某人指向另一个位置，由href=""中的内容决定）：

$("#toggleburger").click(function(e){
    e.preventDefault();
    $(".menu").toggle();
});

Answer 3

意外行为的原因：

<a>已将href设置为其他某个页面。如果必须实现仅适用于页面活动的菜单或按钮，则应将其设置为href="#"。意思是不要将我重定向到任何地方，只需执行与此操作相关联的事件，在您的情况下，切换另一个div。

虽然e.preventDefault()是一种解决方法，但不建议这样做，因为链接在那里什么都不做。如果说你有一个提交自己的表单但是你想在提交之前做一些处理/卫生，那么它会更合适，从而用你的逻辑覆盖默认操作。

id=toggleburger有两个元素。将您的id唯一保留在一个html页面上。这可以在调试时给你带来很多痛苦。

这是一个有效的fiddle，我用文字“ToggleBurger”取代了汉堡包图片。

Answer 4

将href元素的<a>属性设置为等于#：

<li><a href="#" id="toggleburger">

HTML Jquery .toggle没有切换回来

4 个答案: