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中的示例

Answer 2

當我點擊你試圖將click事件綁定到的元素時，我被指示關閉。

這是一個工作小提琴： https ： //jsfiddle.net/p85kazv0/

我只是阻止了你正在使用的a元素的默認動作（當然是將某個人引導到另一個位置，由href="" ）：

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

Answer 3

意外行為的原因：

1. <a>已將href設置為其他頁面。 如果必須實現僅用於頁面活動的菜單或按鈕，則應將其設置為href="#" 。 意思是不要將我重定向到任何地方只執行與此操作鏈接的事件，在您的情況下，切換另一個div。

雖然e.preventDefault()是一種解決方法，但不建議在此處，因為鏈接在那里無所事事。 如果你有一個提交自己的表單但是你想在提交之前做一些處理/衛生，那么它會適合更多，從而用你的邏輯覆蓋默認操作。

2. id=toggleburger有兩個元素。 在一個html頁面上保持您的id唯一。 調試時這會給你帶來很多痛苦。

這是一個工作小提琴 ，我用文本“ToggleBurger”取代了漢堡包圖像。

Answer 4

設置<a>元素的href屬性等於# ：

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