JS下拉菜单默认显示1项

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery制作超级简单易懂的伸缩菜单-Download by http://www.jb51.net</title>
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}

.leftMenu {
float: left;
width: 138px;
overflow: hidden;
margin-top: 20px;
}

.leftMenu dl dt, .leftMenu dl dt a {
display: block;
font-size: 14px;
font-weight: bold;
text-indent: 20px;
line-height: 28px;
}

.leftMenu dl dd ul li, .leftMenu dl dd ul li a {
display: block;
float: left;
width: 138px;
font-size: 14px;
text-indent: 20px;
line-height: 28px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".leftMenu dl dd").hide();
$(".leftMenu dl dt a").click(function(){
$(".leftMenu dl dd").hide();
$(this).parent().next().show();
});
})

</script>
</head>
<body>
<div class="leftMenu">
<dl>
<dt><a href="javascript:void(0);">资料</a></dt>
<dd>
<ul>
<li><a href="#">基础资料</a></li>
<li><a href="#">详细资料</a></li>
<li><a href="#">更换头像</a></li>
</ul>
</dd>
<dt><a href="javascript:void(0);">视频</a></dt>
<dd>
<ul>
<li><a href="#">分享视频</a></li>
<li><a href="#">管理视频</a></li>
</ul>
</dd>
<dt><a href="javascript:void(0);">博客</a></dt>
<dd>
<ul>
<li><a href="">发布文章</a></li>
<li><a href="">管理内容</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
修改成默认显示资料
【基础资料详细资料更换头像视频】展开

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

shot_go
2010-05-27 · TA获得超过340个赞

知道小有建树答主

回答量：257

采纳率：0%

帮助的人：104万

我也去答题访问个人页

关注

展开全部

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>jQuery制作超级简单易懂的伸缩菜单-Download by http://www.jb51.net</title>
        <script language="javascript" type="text/javascript" src="jquery.min.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            .leftMenu {
                float: left;
                width: 138px;
                overflow: hidden;
                margin-top: 20px;
            }
            
            .leftMenu dl dt, .leftMenu dl dt a {
                display: block;
                font-size: 14px;
                font-weight: bold;
                text-indent: 20px;
                line-height: 28px;
            }
            
            .leftMenu dl dd ul li, .leftMenu dl dd ul li a {
                display: block;
                float: left;
                width: 138px;
                font-size: 14px;
                text-indent: 20px;
                line-height: 28px;
            }
        </style>
        <script type="text/javascript">
                           $(document).ready(function(){
                                     $(".leftMenu dl dd").hide();
                                        $(".leftMenu dl dt a").click(function(){
                                         $(".leftMenu dl dd").hide();
                                            $(this).parent().next().show();
                                        });
                                    })                    

</script>
    </head>
    <body >

        <div class="leftMenu">
            <dl>
                <dt ><a href="javascript:void(0);">资料</a></dt>
                <dd id="test">
                    <ul>
                        <li><a href="#">基础资料</a></li>
                        <li><a href="#">详细资料</a></li>
                        <li><a href="#">更换头像</a></li>
                    </ul>
                </dd>
                <dt><a href="javascript:void(0);">视频</a></dt>
                <dd>
                    <ul>
                        <li><a href="#">分享视频</a></li>
                        <li><a href="#">管理视频</a></li>
                    </ul>
                </dd>
                <dt><a href="javascript:void(0);">博客</a></dt>
                <dd>
                    <ul>
                        <li><a href="">发布文章</a></li>
                        <li><a href="">管理内容</a></li>
                    </ul>
                </dd>
            </dl>
        </div>

     <script type="text/javascript">
                           $(document).ready(function(){
                                     $(".leftMenu dl dd").hide();
                                        $("#test").toggle(function(){
                
                                            $(this).parent().next().show();
                                        });
                                    })         
       </script>
    </body>
</html>


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

JS下拉菜单默认显示1项

其他类似问题

为你推荐：