0

我需要一种创建下拉列表的方法。当点击下面的链接时，上面显示了一个表格。

我的 HTML

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

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

4

4 回答 4

2

纯 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;
}

演示

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

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

演示

于 2013-08-21T17:47:32.570 回答
1

由于我没有看到 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/

于 2013-08-21T18:07:47.647 回答
1

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

于 2013-08-21T17:50:23.160 回答
1

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

于 2013-08-21T18:43:18.850 回答