在手機視圖導航問題

我想要在我的移動視圖中顯示的圖標，您可以點擊顯示和隱藏菜單，我的代碼不工作，它根本不打開在手機視圖導航問題

我的問題是試圖找出id和這裏

輸入不知道我做錯了，可能有人點我的方向是正確的嗎？在此先感謝

//這是我

<nav class="navMenu"> 
<input id="menu-icon" type="checkbox"> 
<label id="menu-icon" class="iconMenuLbl" for="menu-icon"></label> 
<ul> 

    <li> 
     <a href=""><img class="navImg" src="media/Home-tall.png" alt=""></a> 
    </li> 
    <li> 
     <a href="summary"><img class="navImg" src="media/My-Details-tall.png" alt=""></a> 
    </li> 
    <li> 
     <a href="loans"><img class="navImg" src="media/My-Loans-tall.png" alt=""></a> 
    </li> 
    <li id="loggedin-box" class=""> 
     <form method="POST" action="login"> 
     <div> 
      <strong>some name</strong> 
     </div> 
     <button style="padding:0px;" name="logout" type="submit"> 
     <img class="navImg" src="media/Sign-Out.png"> 
     </button> 
     </form> 
    </li> 
</ul> 
</nav>

// js文件

$(function() { 
    var menuVisible = false; 
    $('#menu-icon').click(function() { 
    if (menuVisible) { 
     $('.navMenu').css({'display':'none'}); 
     menuVisible = false; 
     return; 
    } 
    $('.navMenu').css({'display':'block'}); 
    menuVisible = true; 
    }); 
    $('.navMenu').click(function() { 
    $(this).css({'display':'none'}); 
    menuVisible = false; 
    }); 
});

來源

2016-06-22 Ris

您的切換複選框應位於菜單之外以隱藏。所以你隱藏後有點點擊。 HTML中不允許重複的ID。（兩個菜單圖標ID）。像[this]（https://jsfiddle.net/L5eLmn31/）應該可以工作。（沒有CSS樣式，那就是爲什麼它很難看。） – AWolf

非常感謝你！ – Ris

你有兩個ID共享相同的名稱。 'menu-icon'嘗試將其中一個ID改爲另一個名稱。 ID應該是唯一的。 - 也可以將輸入欄移出導航標籤。

來源

2016-06-22 16:16:19

在手機視圖導航問題

回答

相關問題