Question

FYI newb here 我已经设法制作了一个小型的JavaScript，当我点击它时它会占据我想要的50％，它会显示隐藏的链接。我想添加再次单击主链接时的附加功能，它将隐藏已显示的链接。所以，我想我要做的就是第一次点击，将隐藏对象的状态更改为内联，然后在下一次单击时，将显示更改回“无”。

<li><a href="#" onclick="document.getElementById('displayLinks').style.display='inline';" ><i class="fa fa-rocket"></i>&nbsp;Studies</a></li>
    <span id="displayLinks" style="display:none;">
        <ul>
            <li><a href="#" class="current"><i class="fa fa-home"></i>&nbsp;216</a></li>
            <li><a href="http://southlore.net/collectiondetail.php?id=103" class="current"><i class="fa fa-rocket"></i>&nbsp;240</a></li>

            <li><a href="http://southlore.net/collectiondetail.php?id=103" class="current"><i class="fa fa-rocket"></i>&nbsp;240 Vids</a></li>
        </ul>
    </span>

Answer 1

您可以创建一个toggle功能，可在inline和none之间切换：

var toggle = (function() {
    var style = 'inline';
    return function() {
        document.getElementById('displayLinks').style.display=style;
        if (style == 'inline') {
            style = 'none';
        } else {
            style = 'inline';
        }
    }
})();

fiddle

Answer 2

尝试使用if else

<li><a href="#" onclick="if(document.getElementById('displayLinks').style.display == 'none') { document.getElementById('displayLinks').style.display='inline'; } else {document.getElementById('displayLinks').style.display='none';}"><i class="fa fa-rocket"></i>&nbsp;Studies</a>

</li> <span id="displayLinks" style="display:none;">
        <ul>
            <li><a href="#" class="current"><i class="fa fa-home"></i>&nbsp;216</a></li>
            <li><a href="http://southlore.net/collectiondetail.php?id=103" class="current"><i class="fa fa-rocket"></i>&nbsp;240</a></li>

            <li><a href="http://southlore.net/collectiondetail.php?id=103" class="current"><i class="fa fa-rocket"></i>&nbsp;240 Vids</a></li>
        </ul>
    </span>

JSFiddle

试图为javascript添加其他功能（

2 个答案: