1. 程式人生 > >Ajax模擬樹狀選單

Ajax模擬樹狀選單

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>應用例項彈出選單</title>
    <script type="text/javascript" src="jslib/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="jslib/jquerymenu.js"></script>
    <link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
    <ul >
        <a href="#">選單1</a>
        <li>子選單1</li>
        <li>子選單2</li>
    </ul>

    <ul >
        <a href="#">選單2</a>
        <li>子選單3</li>
        <li>子選單4</li>
    </ul>
</body>
</html>

css:
/*使用標籤選擇器進行縮排*/
li{
    list-style:none;
    margin-left: 18px;
    display: none;
}
a{
    text-decoration: none;
}


javascript:

//按主選單子選單會顯示或者消失
//在頁面裝載的時候給所有的主選單進行onclick事件

//註冊頁面在裝載的時候執行的方法

$(document).ready( function(){
    //先找所有的主選單,然後給他們進行點選事件
    var as = $("ul").children("a");
    //或者是var uls  = $("ul > a");
    as.click(
        function(){
            var aNode = $(this);

            //找到相應的兄弟節點
            var lis = aNode.nextAll("li");
            //切換選單當前的狀態toggle
            lis.toggle("show");
        }
    );
} );


相關推薦

Ajax模擬選單

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

MVC身份驗證.MVC過濾器.MVC6關鍵字Task,Async.前端模擬表單驗證,提交.自定義匿名集合.Edge匯出到Excel.BootstrapTree選單的全選和反選.bootstrap可搜尋可多選可全選下拉框

在寫這篇部落格之前要嘮叨幾句.本人已從事開發四年有餘.從前兩年的熱情如火.到現在的麻木.總感覺要像上突破.卻又不敢輕舉妄動. 沒事就寫點基礎程式碼.指點下新人吧 1.MVC身份驗證.    有兩種方式.一個是傳統的所有控制器繼承自定義Control,然後再裡面用MVC的過濾器攔截.所以每次網站的後臺被訪問時.

php無限分類 選單經典程式碼

<?php header("content-type:text/html;charset=utf-8"); $conn = mysql_connect('127.0.0.1', 'root', ''); $s = mysql_select

Codeforces Gym 101190 (NEERC 2016) H. Hard Refactoring (模擬 + 陣列)

題意 Helen had come upon a piece of code that uses a lot of “magical constants”. She found a logical expression that checks if an in

選單的前世今生

作者: code lighter 原創 日期: 2017/5/29 關鍵詞: 樹狀選單、 分級選單、遞迴、堆疊、 字串解析、格式轉換 很多時候,網站需要動態載入多級分類選單,後臺程式通過查詢資料庫生成分類選單的巢狀陣列,然後將巢狀陣列轉換成JSON格式輸

【工作筆記】從零開始學ExtJs6( 四)—— 首頁選單和Tab頁的實現

題外話 做一個專案要向完成對應的模組,肯定是先要有樹形選單結構,點選對應才dna跳轉到相應介面,在extjs中如何實現。是上週遇到的一個小問題,現在做做記錄 app目錄下建立data/me

選單(dtree)

dtree的效果圖如下: 頁面程式碼以及CSS樣式如下: 頁面以及css程式碼: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head&

hdu-2688 Rotate---數組+模擬

\n 大小 ans 什麽 nlogn 如果 efi log for 題目鏈接: http://acm.hdu.edu.cn/showproblem.php?pid=2688 題目大意: 給你n數,(n<=3e6),有兩個操作,Q為 當前有多少對數,滿足嚴格遞增,R l

NOIP模擬 相遇(LCA+陣列+dfs序)

【題目描述】 豪哥生活在一個n個點的樹形城市裡面,每一天都要走來走去。雖然走的是比較的多,但是豪哥在這個城市裡面的朋友並不是很多。 當某一天,猴哥給他展現了一下大佬風範之後,豪哥決定要獲得一些交往機會來提升交往能力。豪哥現在已經物色上了一條友,打算和它(豪哥並不讓吃瓜群眾

2018 10 05 校內模擬 二分+壓+

T1: 階乘 fact.cpp 【問題描述】 有 n個正整數 a[i],設它們乘積為 p,你可以給 p乘上一個正整數 q,使 p*q剛好為正 整數m的階乘,求m的最小值。 【輸入】 共兩行。 第一行一個正整數n。 第二行n個正整數a[i]。 【輸出】 共一行 一

2018.10.23【校內模擬】行星通道計劃(二維陣列)(

傳送門 解析: 我們發現,每一條線段會把原來的環狀分成兩段,兩條線段有交點當且僅當一條線段的起終點分別在另一條線段把環形分成的兩個部分中。 所以直接斷環成鏈,每次新加線段&lt;u,v&gt;&lt;u,v&gt;<u,v

NOIP模擬 行星通道計劃(二維陣列)

QAQ 【題目分析】 考慮樹狀陣列維護狀態,然後。。。。。就沒有然後了。。。。。沒想出來二維如何統計。 感覺正解很毒瘤啊,各種壓位操作。。。。所以正常打個二維樹狀陣列還是能過啊。。。。 考慮兩個連線點x,y,如果以後有兩個點x',y'經過他,那麼一定滿足x<x'

Codeforces Round #510 (Div. 2) A 模擬 B列舉 C D離散化+陣列(逆序對)

A Code: #include <bits/stdc++.h> #define LL long long #define INF 0x3f3f3f3f using namespace s

Wannafly模擬賽4 A 題 Laptop 【二維偏序問題 + 陣列維護】

傳送門 //這個是經典的二維偏序問題, 偏序問題也是比較難的一部分, 當上了三維以後, 就要不斷用cdq分治以及一些高階資料結構來解決. 但是這道題還是比較簡單的, 只是一個普通的二維偏序, 所以直接

struts2-ajax-資料的輸出

原始碼: <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <%@ taglib uri="/st

【NOIP 校內模擬】T3 忘了是啥名字了(dfs序+陣列)

對於當前新加入的一條路徑 他產生的貢獻分為兩種 1.另一條路徑的LCA在當前路徑上 2.當前路徑的LCA在另一條上 對於情況1: 可以維護當前點到根節點有多少個LCA,查詢只需查詢u,v,-2*lca(u,v),修改需要對lca的子樹+1 對於情況2: 顯然的樹上差分,查詢就是lca子樹的字首和,修改u++,

P2345 奶牛集會(陣列or模擬

題目背景 MooFest, 2004 Open 題目描述 約翰的N 頭奶牛每年都會參加“哞哞大會”。哞哞大會是奶牛界的盛事。集會上的活動很 多,比如堆乾草,跨柵欄,摸牛仔的屁股等等。它們參加活動時會聚在一起,第i 頭奶牛的座標為Xi,沒有兩頭奶牛的座標是相同的。奶牛們的叫聲很大,第i

最小面積1 [模擬][或陣列]

傳送門 可以把最外兩層取出來然後列舉選哪一個出來 , 這樣做是O(1)的 我的做法是列舉每次少哪一個點 , 在樹狀數組裡修改 , 然後查最大最小就可以 , 這樣是O(nlogn)的 另外 , 注意  #define inf 0x7fffffff 如果是0x3ffffff

2018藍橋杯模擬賽·青出於藍而勝於藍 DFS序+陣列

武當派一共有 nnn 人,門派內 nnn 人按照武功高低進行排名,武功最高的人排名第 111,次高的人排名第 222,... 武功最低的人排名第 nnn。現在我們用武功的排名來給每個人標號,除了祖師爺,每個人都有一個師父,每個人可能有多個徒弟。我們知道,武當派人才輩出,連祖師

【bzoj3289】Mato的文件管理 離散化+莫隊算法+數組

逆序對 sample 單位 oid 逆序 cmp family += efi 原文地址:http://www.cnblogs.com/GXZlegend/p/6805224.html 題目描述 Mato同學從各路神犇以各種方式(你們懂的)收集了許多資料,這些資料一共有n份