Question

我的网页上有两个按钮，用于显示和隐藏页面上的一组工具。我的目标是将它们组合成一个保留切换功能的按钮，并根据是否隐藏/显示工具来更改按钮所说的内容。

到目前为止我的代码是：

{if $edit_page neq 'y'}
<style> .hidden-div{ display:none } </style>
<button id="show-bar" onclick="getElementById('bottom-bar').style.display = 'block'"> Show Page Tools </button>

<style> .hidden-div{ display:block } </style>
<button id="hide-bar" onclick="getElementById('bottom-bar').style.display = 'none'"> Hide Page Tools </button>
{/if}

如何将这两个按钮组合成一个？目前，如果div被隐藏，那个按钮什么都不做，反之亦然。

Answer 1

对于这样简单的脚本，您不需要jQuery。你可以在纯JavaScript中这样做：

{assign var="edit_page" value="n"}

{if $edit_page neq 'y'}
<button id="show-bar" onclick="toggleButton(); return false;">Show Page Tools</button>
{/if}

<div id="bottom-bar" style="display: none;">
something
</div>


<script type="text/javascript">
    function toggleButton() 
    {
        element = document.getElementById('bottom-bar');

        if (element.style.display == 'none') {
            element.style.display = 'block';
            document.getElementById('show-bar').innerHTML = 'Hide Page Tools';
        }
        else {
            element.style.display = 'none';
            document.getElementById('show-bar').innerHTML = 'Show Page Tools';
        }


    }
</script>

当然，如果你将jQuery用于其他事情，你可以在这种情况下使用它，但如果你只是想用它来实现这个功能，你就不需要了。

Answer 2

将其插入<head>部分：

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

并使用此小提琴上的代码：http://fiddle.jshell.net/Dqsdc/

将两个按钮组合成一个切换按钮

2 个答案: