HTML Jquery .toggle 不切换回来答案

【问题标题】：HTML Jquery .toggle not toggling backHTML Jquery .toggle 不切换回来
【发布时间】：2016-04-28 11:44:40
【问题描述】：

 <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>

【问题讨论】：

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

标签： javascript jquery html css

【解决方案1】：

我猜你的问题是你使用了 anchor 标签和 empty href 属性。

尝试进入

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

参见FIDDLE中的示例

【讨论】：

不应该导致页面重新加载吗？
这似乎没有解决它，我最终删除了一般的 href 并选择了 Davids 的答案，这似乎解决了这个问题。感谢您的帮助。
嗯，它应该可以工作，正如您在 Fiddle 中看到的那样。我建议遵循这种方式，而不是阻止使用 javascript 的默认行为，或者更好的是，除非您需要导航到某个地方，否则您不应该使用锚标记。相反，您可以使用几乎任何其他标签并添加一些样式，如cursor: pointer，以获得可点击的手形指针
@pumpkinzzz - 同意你使用另一个元素 - <button> 会更好。不同意不使用 preventDefault()，有很多场景非常有用。
@DavidWilkinson 肯定是这样，但在实际需要时。在这种情况下，我猜

【解决方案2】：

当我单击您尝试将click 事件绑定到的元素时，我被引导了。

这是一个有效的小提琴：https://jsfiddle.net/p85kazv0/

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

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

【讨论】：

非常感谢您似乎解决了这个问题。很抱歉打扰你，但你介意解释一下吗？仅供日后参考。 e.preventDefault 与锚点有何关系？
@swiners 当然，点击事件/函数接受一个参数——在我的例子中是(e)。 JS 检查锚点/a 元素执行的默认事件是否可取消。如果是（href 确实可以取消），JS 将阻止默认事件（即 - href）。更多信息：developer.mozilla.org/en/docs/Web/API/Event/preventDefault

【解决方案3】：

意外行为的原因：

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

虽然e.preventDefault() 是一种解决方法，但不建议在此处使用，因为链接在那里无所事事。如果说您有一个可以自行提交的表单，但您想在提交之前进行一些处理/清理，从而用您的逻辑覆盖默认操作，那将更适合。

id=toggleburger 有两个元素。让您的 id 在一个 html 页面上保持唯一。这会给您在调试时带来很大的痛苦。

这是一个有效的fiddle，我已将汉堡图片替换为文本“ToggleBurger”。

【讨论】：

【解决方案4】：

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

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

【讨论】：