Question

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

我有显示：无;但是我把它取下来让你可以看到容器。

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

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

Answer 1

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

此外，您使用的是id（＃）选择器，而不是class的{{1}}选择器（。）。

试试这个：

quick-links-container

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

Answer 2

你的元素作为类，而不是 id ，你想显示和隐藏所以你需要toggle，你的小提琴没有jQuery补充道。

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

DEMO

Answer 3

试试这个

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);

}

Answer 4

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

您没有在示例文件中包含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/

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

});

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

5 个答案: