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