当链接被点击时显示div

我需要一种方法来创建下拉菜单。在下面点击链接时会显示上面的表格。当链接被点击时显示div

我的HTML

<div id="container"> 
    <table id="supposeToBeHidden"> 
     some content 
    </table> 
    <a href="#" id="btnToClickToShowTable">Click me</a> 
</div>

这将是冷静，如果该解决方案是纯CSS，但不是必须的。

来源

2013-08-21 Michael Tot Korsgaard

纯CSS我不相信，但除了极少数的JavaScript线是可能的。 – DontVoteMeDown

用css :target伪类

<div id="container"> 
    <table id="hide"> 
     <tr><td>some content</td></tr> 
    </table> 
    <a href="#hide" >Click me</a> 
</div>

的CSS：

#hide { opacity: 0; } 
#hide:target {opacity: 1;}

小提琴：http://jsfiddle.net/tdnyd/

更多:target pseudo-class

来源

2013-08-21 18:43:18

如果第二次点击，是否可以再次隐藏表格？ –

@MichaelTotKorsgaard不，这是不可能的......这与我的CSS解决方案基本上是一样的答案，只是隐藏目标有点不同。 – brbcoding

纯CSS，但它不会崩溃备份：

HTML

<div id="container"> 
    <table id="hidden"> 
     <tr><td>some content</td></tr> 
    </table> 
    <a href="#hidden" id="btnToClickToShowTable">Click me</a> 
</div>

CSS

#hidden { 
    display: none; 
} 

#hidden:target { 
    display: block; 
}

Demo

可切换的示例，使用sweet classList api。（香草JS）

var el = document.getElementById('btnToClickToShowTable'); 
var sh = document.getElementById('hidden'); 
el.addEventListener('click', function(){ 
    sh.classList.toggle('show'); 
});

Demo

来源

2013-08-21 17:47:32 brbcoding

这是不可能AFAIK只用CSS，但使用jQuery，你可以做到这一点很容易：

<div id="container"> 
    <table id="supposeToBeHidden"> 
     <tr><td>some content</td></tr> 
    </table> 
    <a href="#" id="btnToClickToShowTable">Click me</a> 
</div>

和

JSFIDDLE：http://jsfiddle.net/LEK6P/

来源

2013-08-21 17:50:23

由于我没有看到jQuery的标签，不过，我觉得我会告诉你如何与JS香草做到这一点：

var bindEvents = (function() { 
    var button = document.getElementById("btnToClickToShowTable"); 
    button.addEventListener("click", function (e) { 
     var table = document.getElementById("supposeToBeHidden"); 
     toggle(table); 
     e.preventDefault(); 
    }, false); 
}());

这里是一个小提琴：http://jsfiddle.net/edfke/1/

来源

2013-08-21 18:07:47

当链接被点击时显示div

回答

相关问题