Question

我需要一种创建下拉列表的方法。这会在下面点击链接时显示上面的表格。

我的HTML

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

如果解决方案是纯css，那将会很酷，但不是必须的。

Answer 1

纯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

Toggleable示例，使用甜蜜的classList api。（香草js）

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

<强> Demo

Answer 2

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

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

和

$(document).ready(function(){
    $("#supposeToBeHidden").hide();
    $("#btnToClickToShowTable").click(function(){
        $("#supposeToBeHidden").toggle();
    });
});

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

Answer 3

由于我没有看到jquery标签，我虽然告诉你如何使用vanilla 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/

Answer 4

使用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

的更多信息

在下面点击链接时显示div

4 个答案: