jq 下拉菜单,新闻面板,checked 记住密码

一、jq下拉菜单:

效果:

jq 下拉菜单,新闻面板,checked 记住密码_第1张图片

ui:

<!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>
    <style type="text/css">
        div {
            width: 200px;
            height: auto;
            border: 1px solid blue;
        }

        #ul1 {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

            #ul1 li {
                text-align: center;
                font-size: 20px;
                font-weight: bolder;
                background-color: Orange;
                border-bottom: 5px solid gray;
                cursor: pointer;
            }

                #ul1 li ul {
                    margin: 0;
                    padding: 0;
                    list-style-type: none;
                    display: none;
                }

                    #ul1 li ul li {
                        font-size: 15px;
                        font-weight: bolder;
                        background-color: pink;
                    }
    </style>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#ul1>li').click(function () {
                $(this).children('ul').show();
                $(this).siblings().children('ul').hide();
            });
        });

    </script>
</head>
<body>
    <bgsound id="sad" loop="0" src="">

        <div>
            <ul id="ul1">
                <li>
                    幼儿园同学
                    <ul>
                        <li>鼻涕虫</li>
                        <li>臭臭</li>
                        <li>爱哭鬼</li>
                        <li>凤姐</li>
                        <li>鼻涕虫</li>
                        <li>臭臭</li>
                        <li>爱哭鬼</li>
                        <li>凤姐</li>
                    </ul>
                </li>
                <li>
                    小学同学
                    <ul>
                        <li>梅超风</li>
                        <li>张无忌</li>
                        <li>乔峰</li>
                        <li>乔布斯</li>
                    </ul>
                </li>
                <li>
                    初中同学
                    <ul>
                        <li>盖茨</li>
                        <li>拉登</li>
                        <li>萨达姆</li>
                        <li>卡扎菲</li>
                    </ul>
                </li>
            </ul>
        </div>
    </bgsound>
</body>
</html>
View Code

重点:

1.  ul 去掉左边的点  list-style-type: none;

2.  ul > li > ul  二级菜单需要隐藏    display: none;

3.

$(function () {
$('#ul1>li').click(function () {
$(this).children('ul').show();   //显示当前按下的li 的子代 ul 
$(this).siblings().children('ul').hide();  //隐藏当前按下li 的兄弟 li 的子代 ul
});
});

 

你可能感兴趣的:(jq 下拉菜单,新闻面板,checked 记住密码)