三級(jí)菜單手寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三級(jí)菜單</title>
    <script src="bower_components/jquery/dist/jquery.js"></script>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0
        }

        body {
            font-size: 12px;
        }

        ul, li {
            list-style: none;
        }

        a:link, a:visited {
            text-decoration: none;
        }

        .list {
            width: 210px;
            border-bottom: solid 1px #316a91;
            margin: 40px 0 0 20px;
        }

        .list ul li {
            background-color: #467ca2;
            border: solid 1px #316a91;
            border-bottom: 0;
        }

        .list ul li a {
            padding-left: 10px;
            color: #fff;
            font-size: 12px;
            display: block;
            font-weight: bold;
            height: 36px;
            line-height: 36px;
            position: relative;
        }

        .list ul li .inactive {
            background: url("image/off.png") no-repeat 184px center;
        }

        .list ul li .inactives {
            background: url("image/on.png") no-repeat 184px center;
        }

        .list ul li ul {
            display: none;
        }

        .list ul li ul li {
            border-left: 0;
            border-right: 0;
            background-color: #6196bb;
            border-color: #467ca2;
        }

        .list ul li ul li ul {
            display: none;
        }

        .list ul li ul li a {
            padding-left: 20px;
        }

        .list ul li ul li ul li {
            background-color: #d6e6f1;
            border-color: #6196bb;
        }

        .last {
            background-color: #d6e6f1;
            border-color: #6196bb;
        }

        .list ul li ul li ul li a {
            color: #316a91;
            padding-left: 30px;
        }
    </style>

</head>
<body>
<div class="list">
    <ul class="yiji">
        <li><a href="#">中國美協(xié)章程</a></li>
        <li><a href="#" class="inactive">團(tuán)體會(huì)員</a>
            <ul style="display: none">
                <li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>
                    <ul>
                        <li><a href="#">辦公室</a></li>
                        <li><a href="#">人事處</a></li>
                        <li><a href="#">組聯(lián)部</a></li>
                        <li><a href="#">外聯(lián)部</a></li>
                        <li><a href="#">研究部</a></li>
                        <li><a href="#">維權(quán)辦</a></li>
                    </ul>
                </li>
                <li class="last"><a href="#">《美術(shù)》雜志社</a></li>
            </ul>
        </li>
        <li><a href="#" class="inactive">組織機(jī)構(gòu)</a>
            <ul style="display: none">
                <li><a href="#" class="inactive active">美協(xié)機(jī)關(guān)</a>
                    <ul>
                        <li><a href="#">辦公室</a></li>
                        <li><a href="#">人事處</a></li>
                        <li><a href="#">組聯(lián)部</a></li>
                        <li><a href="#">外聯(lián)部</a></li>
                        <li><a href="#">研究部</a></li>
                        <li><a href="#">維權(quán)辦</a></li>
                    </ul>
                </li>
                <li><a href="#" class="inactive active">中國文聯(lián)美術(shù)藝術(shù)中心</a>
                    <ul>
                        <li><a href="#">綜合部</a></li>
                        <li><a href="#">大型活動(dòng)部</a></li>
                        <li><a href="#">展覽部</a></li>
                        <li><a href="#">藝委會(huì)工作部</a></li>
                        <li><a href="#">信息資源部</a></li>
                        <li><a href="#">雙年展辦公室</a></li>
                    </ul>
                </li>
                <li class="last"><a href="#">《美術(shù)》雜志社</a></li>
            </ul>
        </li>
    </ul>
</div>


</body>
<script type="text/javascript">
  $(document).ready(function () {
    $('.inactive').click(function () {
      if ($(this).siblings('ul').css('display') == 'none') {
        $(this).parent('li').siblings('li').removeClass('inactives');
        $(this).addClass('inactives');
        $(this).siblings('ul').slideDown(200).children('li');
        if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {
          $(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
          $(this).parents('li').siblings('li').children('ul').slideUp(200);
        }
      } else {
        //控制自身變成+號(hào)
        $(this).removeClass('inactives');
        //控制自身菜單下子菜單隱藏
        $(this).siblings('ul').slideUp(200);
        //控制自身子菜單變成+號(hào)
    $(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');
        //控制自身菜單下子菜單隱藏
        $(this).siblings('ul').children('li').children('ul').slideUp(200);
        //控制同級(jí)菜單只保持一個(gè)是展開的（-號(hào)顯示）
        $(this).siblings('ul').children('li').children('a').removeClass('inactives');
      }
    })
  });
</script>
</html>

最后編輯于：2017.12.11 02:11:39

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末墓拜，一起剝皮案震驚了整個(gè)濱河市报账，隨后出現(xiàn)的幾起案子浇坐，更是在濱河造成了極大的恐慌祝懂，老刑警劉巖，帶你破解...
沈念sama閱讀 211,743評(píng)論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡盒使，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,296評(píng)論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門七嫌，熙熙樓的掌柜王于貴愁眉苦臉地迎上來少办，“玉大人，你說我怎么就攤上這事抄瑟》财” “怎么了？”我有些...
開封第一講書人閱讀 157,285評(píng)論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵皮假，是天一觀的道長(zhǎng)。經(jīng)常有香客問我骂维，道長(zhǎng)惹资，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 56,485評(píng)論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任航闺，我火速辦了婚禮褪测，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘潦刃。我一直安慰自己侮措，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 65,581評(píng)論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布乖杠。她就那樣靜靜地躺著分扎，像睡著了一般。火紅的嫁衣襯著肌膚如雪胧洒。梳的紋絲不亂的頭發(fā)上畏吓，一...
開封第一講書人閱讀 49,821評(píng)論 1贊 290
城市分裂傳說
那天，我揣著相機(jī)與錄音卫漫，去河邊找鬼菲饼。笑死，一個(gè)胖子當(dāng)著我的面吹牛列赎，可吹牛的內(nèi)容都是我干的宏悦。我是一名探鬼主播，決...
沈念sama閱讀 38,960評(píng)論 3贊 408
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼饼煞！你這毒婦竟也來了源葫？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 37,719評(píng)論 0贊 266
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤派哲，失蹤者是張志新（化名）和其女友劉穎臼氨，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體芭届，經(jīng)...
沈念sama閱讀 44,186評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡储矩，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,516評(píng)論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了褂乍。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片持隧。...
茶點(diǎn)故事閱讀 38,650評(píng)論 1贊 340
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖逃片，靈堂內(nèi)的尸體忽然破棺而出屡拨，到底是詐尸還是另有隱情，我是刑警寧澤褥实，帶...
沈念sama閱讀 34,329評(píng)論 4贊 330
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布呀狼，位于F島的核電站，受9級(jí)特大地震影響损离，放射性物質(zhì)發(fā)生泄漏哥艇。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,936評(píng)論 3贊 313
男人毒藥：我在死后第九天來索命
文/蒙蒙一僻澎、第九天我趴在偏房一處隱蔽的房頂上張望貌踏。院中可真熱鬧，春花似錦窟勃、人聲如沸祖乳。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,757評(píng)論 0贊 21
一樁弒父案秉氧，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽眷昆。三九已至，卻和暖如春谬运，著一層夾襖步出監(jiān)牢的瞬間隙赁，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,991評(píng)論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工梆暖，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留伞访，地道東北人。一個(gè)月前我還...
沈念sama閱讀 46,370評(píng)論 2贊 360
代替公主和親
正文我出身青樓轰驳，卻偏偏與公主長(zhǎng)得像厚掷，于是被迫代替她去往敵國和親弟灼。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,527評(píng)論 2贊 349

三級(jí)菜單手寫

推薦閱讀更多精彩內(nèi)容