三級(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>

最后編輯于
?著作權(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
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼饼煞!你這毒婦竟也來了源葫?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤派哲,失蹤者是張志新(化名)和其女友劉穎臼氨,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體芭届,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(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
  • 正文 年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

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