Question

我正在尝试创建一个按钮/超链接，它可以隐藏并显示我的导航栏。首先它是隐藏的，当我点击a元素时，它会改变样式并且是可见的。但它不会在第二次点击时再次隐藏它。如果min-width: 480为假（仅适用于手机和小浏览器窗口），则超链接将可见。

我尝试通过javascript更改onClick值。我将在下面显示。

		<script type="text/javascript">
			function showNavBar() {
				document.getElementById("navigationBar").style.display = "block";
				document.getElementById("navigationBar").onClick = function() { hideNavBar(); };
			}
			function hideNavBar() {
				document.getElementById("navigationBar").style.display = "none";
				document.getElementById("navigationBar").onClick = function() { showNavBar(); };
			}
		</script>
...
		<a  href="javascript:void(0);" onclick="showNavBar();" class="mobileShow">MenuButton</a>
		
		<nav id="navigationBar" class="main"> <!-- begin navigation bar -->
			<ul id="navigationList" class="icon-list">
				<li>
					<a href="">
						<span class="nav-icon">
							<i aria-hidden="true" id="icon-menu" class="nav-icon"></i>
						</span>
						<span>Menu</span>
					</a>
				</li>
				<li>
					<a href="">
						<span class="nav-icon">
							<i aria-hidden="true" id="icon-highscore" class="nav-icon"></i>
						</span>
						<span>Highscore</span>
					</a>
				</li>
				<li>
					<a href="">
						<span class="nav-icon">
							<i aria-hidden="true" id="icon-facebook" class="nav-icon"></i>
						</span>
						<span>Facebook</span>
					</a>
				</li>
				<li>
					<a href="">
						<span class="nav-icon">
							<i aria-hidden="true" id="icon-legalnotice" class="nav-icon"></i>
						</span>
						<span>Legal Notice</span>
					</a>
				</li>			
			</ul>
		</nav> <!-- end navigation bar -->
		<section class="main">
          ...
		</section>
	</body>
</html>

我还尝试使用setAttribute()类似的东西，并使用href属性调用具有相同结果的函数。我不明白为什么在onClick值改变一次后它不起作用。我迫切需要帮助。

干杯。

Answer 1

假设您正在使用jQuery，可以使用.toggle()方法：

function toggleNavbar() 
{
    $("#navigationBar").toggle();
}

<a  href="javascript:void(0);" onclick="toggleNavbar();" class="mobileShow">MenuButton</a>

每次点击时，它都会显示或隐藏它，具体取决于它的状态。

<小时/> 假设你没有使用jQuery：

function toggleNavbar()
{
    var navbar = document.getElementById("navigationBar");
    if (navbar.style.display == 'block' || navbar.style.display=='')
    {
        navbar.style.display = 'none';
    }
    else 
    {
        navbar.style.display = 'block';
    }
}

<a  href="javascript:void(0);" onclick="toggleNavbar();" class="mobileShow">MenuButton</a>

Answer 2

只需要1个功能

 <script>               
        function showHideNavBar() {
        var myStyle = document.getElementById("navigationBar").offsetLeft;

        // check if menu is hidden 
        if(myStyle < 0){   
            document.getElementById("navigationBar").style.display = "block";
        } else {
            document.getElementById("navigationBar").style.display = "none";
       }
    }
    </script>
     <a  href="javascript:void(0);" onclick="showHideNavBar();" class="mobileShow">MenuButton</a>

Answer 3

可能的解决方案是：

<script type="text/javascript">
    var el = document.getElementById("navigationBar");
    el.addEventListener("click", function(){
        if (el.style.display === "block") {
            el.style.display = "none";
        } else {
            el.style.display = "block";
        }
    });
</script>

JavaScript：更改超链接的onClick值

3 个答案: