如何添加像mybb这样的可折叠表格

时间:2013-11-02 11:25:20

标签: jquery html css

我正在尝试添加像mybb

这样的可折叠表

http://prntscr.com/21e2gq

我在jsfiddle上尝试了这个但是我无法在我的html文件中使用这里是jsfiddle

http://jsfiddle.net/BurnedDesigns/hqB5B/

这是我的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>

<title>The Coding Experts</title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="stylesheets/global.css">

<script src="js/jquery.min.js"></script>
<script src="js/min.js"></script>
<script src="js/jquery.cookie.js"></script>

</head>
<body>

<!-- Website coded by Burned Deisgns - The Coding Experts Tutor -->


<div id="container">


    <div id="header">
    <div class="float_right menu">
        <ul class="navigation">

            <li><a href="index.html"><img src="images/home-icon.png"></a></li>
            <li><a href="index.html">Tutorials</a></li>
            <li><a href="index.html">Projects</a></li>
            <li><a href="index.html">Team</a></li>
            <li><a href="index.html">Contact</a></li>
            <li><a href="index.html">About</a></li>

        </ul>
    </div>
        <div class="logo"><img src="images/logo.png" /></div>

    </div>


    <div id="content">

<table class="tborder">
<thead>
    <tr>
        <td class="thead"> 

        <a href="#" id="exclo" style="float:right"><img src="images/min.png"></a>

        </td>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="trow">
            <div id="fliped">Content</div>
        </td>
    </tr>
</tbody>
</table>
    </div>

</div>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

你的小提琴(http://jsfiddle.net/BurnedDesigns/hqB5B/)运作正常。单击“打开/关闭”按钮将按预期显示和隐藏“内容”部分。

在网站上的代码中,请确保将jQuery脚本包装在此:

$(document).ready(function () {
// code here
});

这将确保您的代码在预期时触发。