JavaScript：更改超链接的 onClick 值答案

【问题标题】：JavaScript: Change onClick value of hyperlinksJavaScript：更改超链接的 onClick 值
【发布时间】：2016-09-24 14:48:33
【问题描述】：

我正在尝试制作一个按钮/超链接，它能够隐藏和显示我的导航栏。起初它是隐藏的，当我单击 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 值更改一次后它不起作用。我急需帮助。

干杯。

【问题讨论】：

标签： javascript html css hyperlink onclick

【解决方案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>

【讨论】：

非常感谢。我使用没有 jQuery 的方法，因为我从未使用过 jQuery。我刚刚复制并粘贴了您的代码，一切正常。谢谢你:)

【解决方案2】：

只需要一个函数

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

【讨论】：

【解决方案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>

【讨论】：

不应该是el.style.display之类的吗？无论哪种方式，它都对我不起作用：/我不得不接受@tektiv 的想法