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，它在显示时是固定的，并且占据整个屏幕大小，但目前设置为display:none。现在我的切换已经可以正常工作，但是当我尝试关闭菜单栏时，它似乎无法切换回来。任何帮助都将不胜感激，谢谢。

我的Jquery脚本如下：

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

- swiners

---

尝试在菜单切换语句之前放置alert("testing")或console.log("testing")，看看是否会触发。因为可能存在其他元素与您的菜单按钮重叠，一旦打开，点击实际上并不是点击菜单图标。 - Mohit Bhardwaj

Answer 1

我猜你的问题是使用了一个带有空href属性的锚点标签。尝试更改为：

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

请参见此FIDDLE中的示例。

- pumpkinzzz

---

这不应该导致页面重新加载吗？ - Mohit Bhardwaj

好像那并没有解决问题，最终我把href删除了，采用了David的方法，这样问题似乎得到了解决。感谢您的帮助。 - swiners

好的，它应该可以工作，正如您在Fiddle中所看到的。我建议跟随这种方式，而不是使用JavaScript阻止默认行为，或者更好的方法是，除非需要导航到某个地方，否则不应使用锚标记。相反，您可以使用几乎任何其他标记并添加一些样式，例如 cursor: pointer，以获取可点击的手指指针。 - pumpkinzzz

@pumpkinzzz - 我同意你使用另一个元素 - <button> 更好。我不同意不使用 preventDefault()，因为有很多情况下它非常有用。 - David Wilkinson

@DavidWilkinson 当需要时当然可以使用，但在这种情况下不需要。 - pumpkinzzz

Answer 2

当我点击你想要关联click事件的元素时，我会被重定向到其他页面。

这里有一个可用的代码示例：https://jsfiddle.net/p85kazv0/ 我只是阻止了你使用的a元素的默认操作（默认动作是将用户重定向到另一个由href=""指定的位置）。

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

- David Wilkinson

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - swiners

@swiners 当然，click事件/函数接受一个参数 - 在我的例子中是(e)。JS会检查锚点/a元素正在执行的默认事件是否可取消。如果它是（href确实是可取消的），JS将阻止默认事件（即- href）。更多信息：https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault - David Wilkinson

Answer 3

出现意外行为的原因：

1. <a> 的 href 属性被设置成了其他页面。如果你需要实现菜单或按钮仅用于页面内活动，应该将它设置为 href="#"。这意味着不要将我重定向到任何地方，只需执行与此操作相关联的事件，而在您的情况下是切换另一个 div。

虽然 e.preventDefault() 是一种解决方法，但在这里并不推荐使用，因为链接什么也不做。如果你有一个表单会自动提交但你想在提交前进行一些处理/清理，那么覆盖默认操作就更适合你的逻辑。

2. 有两个 id=toggleburger 的元素。在一个 HTML 页面中保持唯一的 id 可以避免在调试时带来很多痛苦。

这里有一个工作的 fiddle，我用文本“ToggleBurger”替换了汉堡图像。

- avck

Answer 4

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

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

- sTx