如果实现标题超过5条就显示更多按钮，隐藏后面的标题？

yjxf8285 2011-10-09 05:40:56

<div class="nav">
<dl>
<dd>数码相</dd>
<dd>摄像机</dd>
<dd>照片打印机</dd>
<dd>单反镜头/附件</dd>
<dd>数码相</dd>
<p><a href="#">显示更多 >></a> </p>
<dd>摄像机</dd>
<dd>照片打印机</dd>
<dd>单反镜头/附件</dd>
<dd>摄像机</dd>
<dd>照片打印机</dd>
<dd>单反镜头/附件</dd>
</dl>
</div>

比如上面的Html代码，请问用jquery如何判断如果dd的条数超过5条就显示更多按钮，如果小于五条就隐藏更多按钮，点击更多按钮后隐藏更多按钮并显示全部的DD，鼠标离开dl区域隐藏多余的dd，只显示5个dd。

可能我的思路复杂了，也可能是正确的，不过代码具体怎么写还在研究中，谁如果知道怎么写，发上来学习一下哈，多谢！

...全文

248 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

yjxf8285 2011-10-09

打赏
举报

[Quote=引用 2 楼 hack_pan 的回复:]

不知道是不是你要的效果
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
……
[/Quote]

是的，我想要的就是gt，谢谢！

hack_pan 2011-10-09

打赏
举报

不知道是不是你要的效果



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>



    <script src="lib/jquery-1.4.2.js" type="text/javascript"></script>



    <script type="text/javascript">

        $(document).ready(function() {

            var dl = $(".nav dl");

            var dds = $(".nav dl dd");

            if (dds.length > 5) {

                dl.find("dd:gt(4)").hide();

            }

            else {

                dl.find("dt").hide();

            }



            //点击更多

            $(".nav dl dt a").click(function() {

                $(this).parent().hide();

                dl.find("dd:gt(4)").show();

            });

        });

    </script>



</head>

<body>

    <div class="nav">

        <dl>

            <dd>

                数码相</dd>

            <dd>

                摄像机</dd>

            <dd>

                照片打印机</dd>

            <dd>

                单反镜头/附件</dd>

            <dd>

                数码相</dd>

            <dt><a href="#">显示更多 >></a> </dt>

            <dd>

                摄像机</dd>

            <dd>

                照片打印机</dd>

            <dd>

                单反镜头/附件</dd>

            <dd>

                摄像机</dd>

            <dd>

                照片打印机</dd>

            <dd>

                单反镜头/附件</dd>

        </dl>

    </div>

</body>

</html>