如何在按鈕單擊時顯示div？

-1

如何在按鈕單擊時顯示.quick-links-container？如何在按鈕單擊時顯示div？

我有顯示：無;設置，但我把它拿走了，所以你可以看到容器。

到目前爲止，我有這個，但它不工作：

$('.quicklinks-button').click(function(){$('#quick-links-container').show();});

來源

2013-07-02 Chaddly

嘗試這裏 http://stackoverflow.com/questions/ 1403615 /使用-jquery隱藏一個div，當用戶點擊它之外 – 2013-07-02 14:38:45

你的元素具有作爲類，而不是一個ID，要顯示和隱藏，所以你需要toggle，你撥弄沒有添加jQuery。

$('.quicklinks-button').click(
    function() { 
     $('.quick-links-container').toggle(1000); 
    } 
);

DEMO

來源

2013-07-02 14:36:45

這真棒！謝謝！ – Chaddly

你忘了在左側面板上的添加jsfiddel jQuery庫。

此外，您使用id（＃）選擇器而不是class選擇器（。）爲quick-links-container。

試試這個：

$('.quicklinks-button').click(function(){ 
    $('.quick-links-container').toggle(); 
});

活生生的例子：http://jsfiddle.net/gnjNq/9/

來源

2013-07-02 14:37:04 Alvaro

jsfiddle無效的網址。 – Chaddly

@瘋狂固定。 – Alvaro

試試這個

demo

$('.quicklinks-button').click(function(){$('.quick-links-container').show();}); 

.quick-links-container{ 
right: 20px; 
background-color: white; 
height: 500px; 
width: 200px; 
position: absolute; 
box-shadow:5px 1px 6px rgba(0,0,0,.2); 

}

來源

2013-07-02 14:40:39

沒有隱藏，只有'show（）'？ –

http://jsfiddle.net/gnjNq/13/使用此 –

你沒有的，因爲以下原因成功：

您沒有在示例文件中包含jQuery。
你在你的HTML中有一個名爲quick-links-container的類，但是在你的JS中你使用的是#quick-links-container，它返回一個ID。因此，需要更改爲'.quick-links-container'
您在點擊時只使用show()，因此點擊div將始終設置爲顯示，而您可以使用toggle()切換div的可見性。

所以，你的JavaScript代碼需要進行修改以下列：

$('.quicklinks-button').click(function(){ $('.quick-links-container').toggle();});

的jsfiddle：http://jsfiddle.net/GautamChadha/U5Rwg/

來源

2013-07-02 14:56:34

// you must use toggle 
// this is jquery 

$('#hide').click(function(){ 
var current = $(this).val(); 
$('p').toggle(); 

// this will toggle the value of button from show to hide and vice versa 

if(current == 'hide'){     
$('#hide').val('show'); 
}else{ 
    $('#hide').val('hide'); 
    } 

});

來源

2013-07-02 16:07:29 sid

如何在按鈕單擊時顯示div？

回答

相關問題