javascript切换按钮可打开和关闭div

Question

如何获得切换按钮，不仅可以将名称从视图更改为隐藏，还可以显示div标签中包含的表？

我的脚本当前具有以下内容：

   <script type = "text/javascript">
function buttonToggle(where,pval,nval)
{
        where.value = (where.value == pval) ? nval : pval;

}
</script>

这是按钮的代码：

<input type="button" name="button1" id="nextbt" value="View " onclick="buttonToggle(this,'View ','Hide ')">

Answer 1

好吧，如果您可以使用jQuery，那将非常简单：

$('#nextbt').click(function() {
    if ($(this).attr('value') == 'show') {
        $(this).attr('value', 'hide');
        $('#myotherdiv').slideDown();
    } else {
        $(this).attr('value', 'show');
        $('#myotherdiv').slideUp();
    }

    // or if you don't care about changing the button text, simply:
    $('#myotherdiv').slideToggle();
});

此处更多信息： http : //api.jquery.com/slideToggle/

Answer 2

就像是：

function buttonToggle(where,pval,nval) {
    var display =  where.value === nval ? 'none' : 'block'; // or 'table'
    document.getElementById('yourTableId').style.display = display;
    where.value = (where.value == pval) ? nval : pval;
}

---

或更好：

function buttonToggle(source, target, show_val, hide_val) {
    var display =  source.value === hide_val ? 'none' : 'block'; // or 'table'
    target.style.display = display;
    source.value = (source.value == show_val) ? hide_val : show_val;
}

而不是内联添加您的点击处理程序，请使用JavaScript：

document.getElementById('nextbt').onclick = (function() {
    var table = document.getElementById('yourTableId');
    return function() {
        toggleButton(this, table, 'View', 'Hide');
    };
}());

Answer 3

使用jQuery。 参见演示http://jsfiddle.net/nBJXq/2/

Answer 4

假设您将要显示/隐藏的表的id添加为按钮的rel属性：

<input type="button" name="button1" id="nextbt" 
       rel="myTable" value="View " 
       onclick="buttonToggle(this,'View ','Hide ')">

<table id="myTable">
    <tr>
        <td>myTable</td>
    </tr>
</table>

然后，您可以将以下内容添加到buttonToggle函数中：

function buttonToggle(where, pval, nval) {
    var table = document.getElementById(where.attributes.rel.value);
    where.value = (where.value == pval) ? nval : pval;
    table.style.display = (table.style.display == 'block') ? 'none' : 'block';
}

参见示例。

Answer 5

您将需要将div的style.visible更改为visible或hidden ，和/或将style.display设置为block或none 。

请参阅： http ： //w3schools.com/css/css_display_visibility.asp