Question

所以我有Ajax设置用链接替换主div。虽然我也有一个剧透类型导航，你可以隐藏或显示菜单。无论如何我的链接都在这里，我想知道如何拥有它，所以当我点击其中一个链接时，它将切换菜单并关闭它。

<input class="spoilerbutton show2" style="width:100%" type="button" value="Show Navigation" onclick="this.value=this.value=='Show Navigation'?'Hide Navigation':'Show Navigation';">
<div class="show2 spoiler"><div>

<nav id="nav" class="show2">
<ul>
<li id="ajax" class="ajax"><a href="index.html" id="ajax" class="ajax skel-panels-ignoreHref">Home</a></li> 
</ul>
</nav>

</div></div>

CSS：

.spoilerbutton {display:block;margin:5px 0;}

.spoiler {color:black;overflow:hidden;background: #f5f5f5;}

.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}

.spoilerbutton[value="Show Navigation"] + .spoiler > div {margin-top:-100%;}

.spoilerbutton[value="Hide Navigation"] + .spoiler {padding:5px;}

更新新代码：

<input name="spoilerbtn" name="spoilerbtn" class="spoilerbutton show2" style="width:100%" type="button" value="Show Navigation"  onclick="this.value=this.value=='Show Navigation'?'Hide Navigation':'Show Navigation';">

<div class="show2 spoiler"><div>

<nav id="nav" class="show2">

                            <ul>
                                <li id="ajax" class="ajax"><a href="index.html" onclick="spoilerbutton.value=spoilerbuttonv.value=='Show Navigation'?'Hide Navigation':'Show Navigation';" id="ajax" class="ajax skel-panels-ignoreHref">Home</a></li>




                            </ul>
                        </nav>


</div></div>

Answer 1

将onclick="spoilerbtn.value = 'Show Navigation';"添加到您的链接应该有效。并将name="spoilerbtn"添加到您的按钮。

按链接切换CSS Spoiler按钮

1 个答案: