如何在Jquery中使用hide/show功能？

我有一個HTML頁面有一個切換按鈕和一些下拉項目。我的切換按鈕就像開關。
我需要什麼？我需要隱藏下拉項目，當我點擊「開」並顯示下拉列表時，我點擊
關閉。我很新手上HTML , CSS, JQuery。這裏是我的代碼的HTML文件，其中只有
切換。如何在Jquery中使用hide/show功能？

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" 
type="text/javascript"></script> 
<script src="jquery/iphone-style-checkboxes.js" type="text/javascript" 
charset="utf-8"></script> 
<link rel="stylesheet" href="style.css" type="text/css" media="screen" 
charset="utf-8" /> 
<style type="text/css"> 
    body {padding: 10px; } 
th {text-align: right;padding: 4px;padding-right: 15px;vertical-align: top; } 
.css_sized_container .iPhoneCheckContainer {width: 250px; } 
</style> 

<script type="text/javascript" charset="utf-8"> 
$(window).load(function() { 
    $('.on_off :checkbox').iphoneStyle(); 
    $('.disabled :checkbox').iphoneStyle(); 
    $('.css_sized_container :checkbox').iphoneStyle({ 
    resizeContainer: false, resizeHandle: false 
    }); 
    $('.long_tiny :checkbox').iphoneStyle({ 
    checkedLabel: 'Very Long Text', uncheckedLabel: 'Tiny' 
    }); 

    var onchange_checkbox = ($('.onchange :checkbox')).iphoneStyle({ 
    onChange: function(elem, value) { 
     $('span#status').html(value.toString()); 

    } 
    }); 

    setInterval(function() { 
    onchange_checkbox.prop(
    'checked', !onchange_checkbox.is(':checked')).iphoneStyle("refresh"); 
    return 
    }, 2500); 
}); 

</script> 
</head> 
<body> 
    <table><tr class="on_off"> 
    <td> 
     <input type="checkbox" id="on_off" /> 
    </td> 
    </tr></table> 
</body> 
</html>

我知道下面的函數用於隱藏和顯示。

$(document).ready(function(){ 
    $("#hide").click(function(){ 
     $("p").hide(); 
    }); 
    $("#show").click(function(){ 
     $("p").show(); 
    }); 
});

但我不明白如何在javascript執行此功能。
因爲兩個按鈕，我只用一個按鈕，上面的函數工作..
請給我任何暗示或指示我在哪裏，我錯了....

來源

2012-08-27 Sandip Armal Patil

您可以使用toggle方法：

顯示或隱藏匹配的元素。

$("#button").click(function(){ 
    $("p").toggle(); 
});

或根據您的標記：

$("#on_off").change(function(){ 
    $("p").css('display', this.checked ? 'block' : 'none'); 
});

來源

2012-08-27 07:47:37 undefined

或者，你c使用'.toggle'將兩個不同的處理程序綁定到一個按鈕。例如'$（'＃button'）。toggle（hideHandler，showHandler）;' – timidboy

@Onchie'toggle'已被棄用http://api.jquery.com/category/deprecated/ – undefined

您可以使用此;

HTML

<p>Hello</p> 
<input type="submit" value="submit" id="button">

JSCODE

$('#button').on('click', function(){ 
    $('p').slideToggle(); 
})

$('#button').on('click', function(){ 
    $('p').toggle(); 
})

來源

2012-08-27 07:49:33 Codegiant

Sandip是爲你工作的。 – Codegiant

對不起，第一次有拼寫錯誤，現在你可以試試這個。 – Codegiant

INPUT是一個自動關閉標籤。 – timidboy

請參閱您的要求，您不需要使用2個函數調用。您可以使用將執行這兩個功能的切換方法。請參閱下面的示例：

$("#button").click(function(){ 
$("p").toggle(); 
});

也給了效果，而隱藏的任何元素參考以下鏈接：

Effects for Hide in Jquery

來源

2013-11-10 18:40:01

正常只是一種方式是

$("#hide").click(function(){ 
$("p").hide(); 
}); 

$("#show").click(function(){ 
$("p").show(); 
});

通過這個鏈接http://www.w3schools.com/jquery/jquery_hide_show.asp

來源

2014-09-04 13:44:08

如何在Jquery中使用hide/show功能？

回答

相關問題