javascript - 如何在按钮单击时显示 div？

Question

如何在按钮单击时显示 .quick-links-container？

jsFiddle：http: //jsfiddle.net/gnjNq/5/

我有 display: none; 设置，但我把它取下来，这样你就可以看到容器了。

到目前为止，我有这个但它不起作用：

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

Answer 1

您忘记在左侧面板的 jsfiddel 上添加 jQuery 库。

此外，您使用的是id(#) 选择器而不是class选择器 (.) for quick-links-container.

尝试这个：

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

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

Answer 2

您的元素将其作为一个类，而不是一个id，您想要显示和隐藏，所以您需要toggle，您的小提琴没有添加 jQuery。

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

演示

Answer 3

尝试这个

演示

$('.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);

}

Answer 4

由于以下原因，您没有成功：

1. 您没有在示例文件中包含 jQuery。
2. 您在 HTML 中调用quick-links-container了一个类，但在您使用的 JS 中，#quick-links-container它返回了一个 ID。因此需要将其更改为 '.quick-links-container'
3. 您仅show()在单击时使用，因此在单击时 div 将始终设置为显示，而您可以使用它toggle()来切换 div 的可见性。

因此，您的 javascript 代码需要修改为以下内容：

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

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

Answer 5

// 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');
   }

});