用JQuery實現簡單的菜單隱藏於切換

阿新 • • 發佈：2019-03-15

簡單的 col 隱藏 type remove git hidden pac tst

《鋒利的JQuery》第一個demo<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="jquery-3.3.1.min.js" 
></script>
    <title>Document</title>
    <style>
        div.showall>a:hover{
            color: rgb(235, 147, 39)
        }
        .promoted{
            background-color: deepskyblue;
            width: 10%;
        }
    </style>
</head>
<body 
>
    <div class="container">
        <ul>
            <li><a href="#">Html</a></li>
            <li><a href="#">Css</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#"> 
JQuery</a></li>
            <li><a href="#">BootStrap</a></li>
            <li><a href="#">Ajax</a></li>
            <li><a href="#">Node.js</a></li>
            <li><a href="#">Http</a></li>
            <li><a href="#">Tcp/Ip</a></li>
            <li><a href="#">Vue</a></li>
            <li><a href="#">Github</a></li>
            <li><a href="#">Webpack</a></li>
            <li><a href="#">Json</a></li>
            <li><a href="#">OOP</a></li>
            <li><a href="#">Less</a></li>
        </ul>
        <div class="showall">
            <a href="more.html"><span>顯示全部</span></a>
            <!-- 平穩退化：如果用戶禁用了js 就將整個頁面重載來顯示完整列表 -->
        </div>
    </div>
    <script>
        var $hiddenitems = $("ul li:gt(5):not(:last)");//獲取ul下索引值大於5的li元素，再去掉最後一個符合的li
        $hiddenitems.hide();
        var showbtn = $("div.showall> a");//不能用.showall div
        showbtn.click(function(){
            if($hiddenitems.is(":visible")){
                $hiddenitems.hide();
                $(this).find("span").css("color","red")
                    .text("收起列表");
                $("ul li").filter(":contains(‘JQuery‘),:contains(‘Node‘)")
                    .removeClass("promoted");
        }else{
                $hiddenitems.show();
                $(this).find("span").css("color","deepskyblue")
                    .text("顯示全部");
                $("ul li").filter(":contains(‘JQuery‘),:contains(‘Node‘)")
                .addClass("promoted");
            }
            return false;
        })

        //《鋒利的JQuery》中提到了使用toggle方法，我試了一下發現並不可以
　　　　　//查閱後得知jquery1.9以後toggle方法只做切換隱藏顯示動畫用了，toggle([speed],[easing],[fn])
　　
    </script>
</body>
</html>

用JQuery實現簡單的菜單隱藏於切換

簡單的 col 隱藏 type remove git hidden pac tst 《鋒利的JQuery》第一個demo<!DOCTYPE html> <html> <head> <meta charset="UT

用jQuery實現簡單的DOM操作

追加匹配簡單的 rep 兄弟節點子元素 spa 添加元素新建通過jQuery創建元素節點：$oLi = $("<li></li>");這樣我們就創建了一個li標簽如果想在元素節點中添加文本的話也挺簡單：$oLi = $("<li&g

Android Design Support Library（二）用NavigationView實現抽屜菜單界面

mpi tar bar board contex != print 滑動頭部 NavigationView在MD設計中很重要，之前Google也提出了使用DrawerLayout來實現導航抽屜。這次，在Android Design Support Li

JQuery實現層級菜單

-i ldr down 筆記 borde 分享 20px size this 效果圖： HTML代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

用jQuery實現簡單的加入收藏頁面的功能

原文地址：http://blog.csdn.net/newsxy/article/details/8692491 加入收藏功能是我們常見的功能，今天研究學習了一下，寫了一個簡單的例子，主要實現加入收藏的功能： html程式碼如下： <a href="#" id

ArcGIS api for javascript+jquery實現簡單的圖層控制切換

這一個功能網上有很多版本，快被寫爛了。寫這篇部落格的初衷是給各位不是GIS行業或沒有接觸過這個東東的猿們一些幫助。或許還有更簡單或者相似的希望大家看了之後可以提出來一起討論。只是很初級的程式碼，希望各位大大路過輕噴。歡迎交流。話不多說，咱們開始。首先在已有地圖物件及圖層的

使用jQuery實現簡單的tab欄標籤切換

強調下沒有CSS樣式程式碼 1.頁面結構程式碼 <div class="container"> <ul class="tabs"> <li class="active"><a href="#tab1">導

用jquery實現隱藏列表表單的顯示關閉切換以及Ajax方式改動提交相應的那一行的改動內容。

turn jquery enter lag exit none button inpu ner 請勿盜版，轉載請加上出處http://blog.csdn.net/yanlintao1 請勿盜版，轉載請加上出處http://blog.csdn.net/yanli

編輯器拓展九——用代碼實現unity菜單命令

中一 post body 同時 selected 使用最大的自動調用 ima 描述　　今天給美術寫了個工具，通過一些檢查把一些有問題的物件選出來，並讓其中一個處於選中狀態，方便美術有方向的修改。中間遇到了一個問題，有問題的物件太多，點一次工具，需要按一下F來把

用 jQuery 實現表單驗證（轉載）

失去焦點 cli on() 獲得 itl 文本框特殊體驗格式 jQuery 官方 API 地址： http://api.jquery.com/ 在線引用 jQuery：http://code.jquery.com/ ——選自《鋒利的jQuery》（第2版）第5章的

【轉】Asp.net 用datalist嵌套的方法實現二級菜單的分類導航

col ESS 方法 tab server select lec cut esp 剛開始學習Asp.net做網站的時候，做的是一個電子圖書購買網站，發現圖書有多級類目。例如：小說分類下面世界名著，中國古典小說....... 文學類目下有

jQuery --下拉菜單的顯示與隱藏

relative ldr src auto children oct code wid play 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charse

用JQuery實現點選按鈕來顯示/隱藏某個div

剛開始我還在判斷div的display屬性是不是等於"none"，來選擇是show()還是hide()，現在才想起來直接用toggle()方法就可以了嘛，真的是太方便了使用jQuery的時候，千萬不

用jquery較簡單的實現滑鼠移進移出樣式變化的效果！

用jquery實現的簡單資料雙向繫結

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script

jquery實現簡單搜索$("p:contains()")

但是 input 一行實現 zhang hang head style scrip <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" />

JS實例之滾動固定效果，實現頂部菜單固定效果。

rip bsp 實現 con tel body text 滾動 title 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3

用jq實現簡單輪播

cti 標簽 function radi har mil ott ava 懸停一個簡單的實例： css代碼： <style type="text/css">@charset "utf-8";*{ padding:0px; border:

用jQuery實現播放時出現的錯誤

畫面 query 今天 absolut htm 元素 play body 我們　　　今天，我在項目時，我的朋友讓我給她找錯誤，她說她用jQuery寫視頻的播放，獲取的按鈕也對，使用的方法也對，就是播放不了。　　　　她的思路是這樣的，在剛開始的視頻畫面上有個播放按鈕，她想

【前端】用jQuery實現瀑布流效果

scrollto title n) 個性避免 ive gets type turn jQuery實現瀑布流效果何為瀑布流：　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加

用JQuery實現簡單的菜單隱藏於切換

相關推薦