将两个按钮合并为一个切换按钮答案

【问题标题】：Combine two buttons into one toggling button将两个按钮合并为一个切换按钮
【发布时间】：2014-07-25 00:03:14
【问题描述】：

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

到目前为止我的代码是：

{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 被隐藏，则该按钮不执行任何操作，反之亦然。

【问题讨论】：

标签： javascript jquery html toggle smarty

【解决方案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 用于其他事情，您可以在这种情况下使用它，但如果您只想将它用于此功能，则不需要。

【讨论】：

这很棒。正是我想要的。谢谢
很高兴能为您提供帮助。

【解决方案2】：

将此插入您的<head> 部分：

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

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

【讨论】：

谢谢，我在搜索中也遇到了这个问题。会让你知道结果如何。