2. 程式人生 > >多級選單導航欄

多級選單導航欄

阿新 • • 發佈：2018-11-28

在一些專案中，都會有許多的導航欄，或者選單欄，有的是二級選單，有的是三級選單，更有的是四級選單，那麼這時就會非常頭痛，我也是在閒事為大家寫了這麼一個小demo，希望大家可以參考一下。

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        
        ul li.yiji {
            list
 
-style-image: url(img/-.gif);
        }
        ul li{
            cursor: pointer;
        }
    </style>

    <body>
        <ul>
            <li class="yiji">主題市場
                <ul>
                    <li>運動派
                        <ul>
                            <li>三級選單a</li>
                            <li>三級選單b</li>
                            <li>三級選單c</li>
                            <li>三級選單d</li>
                        </ul>
                    </li>
                    <li>有車族
                        
 
<ul>
                            <li>三級
                                <ul>
                                    <li>四級</li>
                                    <li>四級</li>
                                    <li>四級</li>
                                </ul>
                            </li>
                            <li>三級</li>
                            <li>三級</li>
                            <li>三級</li>
                        </ul>
                    </li>
                    <li>生活家</li>
                </ul>
            </li>
            <li class
 
="yiji">特色購物
                <ul>
                    <li>淘寶二手</li>
                    <li>拍賣會</li>
                    <li>愛逛街</li>
                    <li>全球購</li>
                    <li>淘女郎</li>
                </ul>
            </li>
            <li class="yiji">優惠促銷
                <ul>
                    <li>天天特價</li>
                    <li>免費試用</li>
                    <li>清倉</li>
                    <li>1元起拍</li>
                </ul>
            </li>
            <li>工具</li>
        </ul>
        <div name="dd"><p>dd</p></div>
        <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>  
        <script type="text/javascript">
            //has()匹配含有選擇器所匹配的元素的元素
            //is()根據選擇器、元素或 jQuery 物件來檢測匹配元素集合
            $(function(){
                $("li:has(ul)").click(function(e){
                    if(this == e.target){
                        if($(this).children().is(":hidden")){
                            $(this).css("list-style-image","url(img/-.gif)");
                        }else{
                            $(this).css("list-style-image","url(img/1.gif)");
                        }
                        $(this).children().toggle("slow");
                    }
                    
                })
                $("li:not(:has(ul))").css("list-style","none");
            })
            
        </script>

    </body>

</html>

 

相關推薦

Vue結合Element-UI實現多級選單導航欄

在需要加入導航欄的元件內新增麵包屑導航欄，構建出一個可以根據路由動態改變其值的資料變數 { levelList }，迴圈levelList，為每一個item設定點選時的跳轉路由 <el-breadcrumb class = "app-breadcrumb" separator =

多級選單導航欄

在一些專案中，都會有許多的導航欄，或者選單欄，有的是二級選單，有的是三級選單，更有的是四級選單，那麼這時就會非常頭痛，我也是在閒事為大家寫了這麼一個小demo，希望大家可以參考一下。   <!DOCTYPE html> <html> <head>

實現一個可動態擴充套件的，按鈕突出可變的，安卓底部選單導航欄

  所謂贈人玫瑰，手留餘香！非常感謝無私奉獻的前輩們。之前在練習安卓的底部狀態列的時候，看到前輩的一個帖子很好的知道了我的實踐。 地址在：這裡 但是後面我覺得這樣用起來不是很舒適，因為底部數量是固定的。  能不能根據後臺的資料來動態的設定呢？  於是開始實踐，最終的

vue.js實現選單導航欄（最終版）

效果： <template> <div class="layout-container"> <y-header> <div slot="nav"></div> </y-he

java freemarker遍歷樹形選單(導航欄選單)

最近在寫框架，到了模板對樹形的處理，從後臺到前端有必要把整個過程記錄下來 freemarker是一套模板引擎，主要用於資料的展示，你能看到這篇文章相信你對freemarker有所瞭解。 首先看我們的選單(樹形)資料結構 程式碼生成： import java.io.Ser

CSS實現自定義導航欄帶二級選單

程式碼如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &

css導航欄二級選單寫法

<html> <head> <title>二級選單測試</title> <meta charset="utf-8"> <style type="text/css"> /*為了使選單居

Axure導航欄移入移出顯示隱藏下拉選單——紀梵希官網導航欄動效

最近學習了一下網頁原型製作。仿照紀梵希官網做的網頁原型，其中導航欄涉及邏輯較複雜，打卡記錄一下。 首先，分析官網導航欄動效的需求： 1.滑鼠點選導航選項卡，跳轉至對應的導航頁面。 2.滑鼠移入導航選項卡時，出現對應的下拉選單，選項卡下方顯示選中狀態。 3.滑鼠向上移出選項卡時，下

多級選單欄展開隱藏動畫

<div class="tab-pane" id="deviceControl">  裝置控制面板  <ul class="list-unstyled">      <li>     

ionic3 導航欄返回按鈕事件設定 多級頁面返回到指定的頁面

借鑑原文地址 多級頁面返回到指定的頁面 export class Page { @ViewChild(Navbar) navBar: Navbar; ① ionViewDidLoad() { ② this.navBar.backButtonCli

還原淘寶首頁最頂部的導航欄（含下拉選單，圖示等）

　　還原了淘寶首頁最頂部的導航欄，包括了各個導航的下拉列表等（位置對齊稍微有些偏差，畢竟沒有原版設計圖），用到了jquery，js，CSS3等知識。沒有花時間去做錄屏GIF，就幾張效果圖看下：如下 　　原始導航欄進去後如上圖，當滑鼠劃過後下拉選單出現，本身的背景色改變等。如下： 上圖為區域選擇，每

前端歷程(三)---頁面小練習之導航欄加下拉選單

前言 ​ 預備環節完成後就要開始練習寫一些小頁面或是小東西，首先是做一個簡單的導航欄及下拉選單的小練習。在此之前也會先介紹一下一個比較好用的css屬性。 display：flex display，display屬性設定一個元素應如何顯示。隱藏一個元素可以通過把d

Ecshop中導航欄中使用二級選單顯示並呼叫子分類

最近公司交給我一個任務，就是要我使用ecshop仿照某國外著名商城網站的模板，前臺樣式模仿就直接照抄照搬，整個過程還相對簡單，但就在一個問題上卡住了，就是模板中有涉及主導航二級欄目顯示分類商品問題，老實說，這一次是第一

Bootstrap導航欄和下拉選單

導航欄寫法示例： <nav class="nav navbar-default"> <div class="container"> <div class="navbar-header">

Android仿微信底部選單欄+今日頭條頂部導航欄

背景 Android應用幾乎都會用到底部選單欄，在Material Design還沒有出來之前，TabHost等技術一直佔主流，現在Google新sdk中提供了TabLayout類可以便捷的做出底部選單欄效果。 本節我們實現兩種主要的Tab效果： 仿微信底部選

renren開源導航欄點選同一選單不重新整理頁面問題

最近一個專案使用了renren-security這個開源框架，先縱覽一下外觀， 嗯，確認過眼神，是傳統管理後臺的樣子~ 使用過程中發現，當在導航欄中點選同一選單時，iframe並不會重新整理，其實這也不算個問題，奈何產品經理就要這個功能，只好看看人家原始碼是怎

使用django + layui實現側邊欄多級選單的功能

layui本身是個非常棒的前段框架，自帶的也有側邊欄功能，不過不 支援多級，子選單也沒有縮排，因此，我做了些調整。 樹形選單是通過Django的自定義標籤渲染的。自定義標籤程式碼如下： def is_ancestor(current, menu): """

針對bootstrap沒有多級導航欄的解決辦法

在bootstrap3的官方說明文件中，對於導航欄的下拉選單選項，只介紹了二級下拉導航，這種侷限性怎麼可以忍， 如果不想要第三方工具解決問題，可以通過單擊事件對導航選項的標籤屬性進行頻繁修改，再引入第三方css檔案 即可解決，但這種操作標籤屬性的方法實在是low要是需求再多

Bootstrap3.3.7導航欄下拉選單滑鼠滑過展開

$(function () { $(".dropdown").mouseover(function () { $(this).addClass("open"); });

如何做分類導航欄選單js

js程式碼： $(function() { // 導航選單 var catelistsli = $(".fp-catelists").find("li"); // 選單顯示