jQuery實現側邊導航手風琴效果
側導航的手風琴效果是指,點選含子層導航的父導航時,使原本隱藏的子導航顯示,再次點選,子層導航又恢復隱藏,同時,同一時間只有一個父導航的子導航能夠顯示
$("#sidenav > li").find('.sub-nav').hide();
var ico = '<i style="float:right;font-size:12px;" class="glyphicon glyphicon-chevron-down"></i>';
$("#sidenav > li").find('.sub-nav').prev('a').find('span' ).after(ico);
$('#subnav .sub-nav:eq(0)').attr('id','current');
$('.sub-nav').each(function(){//.sub-nav要設一個#current
$('.sub-nav ul#current').find('span').next('i').attr('class','glyphicon glyphicon-chevron-up');
$(this).parent().children('a').on('click',function (e){
e.preventDefault();
var target = $(this).parent().children('ul');
if ($(this).parent().children('a').find('span').next('i').hasClass('glyphicon glyphicon-chevron-up')) {
target.slideUp();
$(this).parent().children('a' ).find('span').next('i').removeAttr('class','glyphicon glyphicon-chevron-up');
$(this).parent().children('a').find('span').next('i').attr('class','glyphicon glyphicon-chevron-down');
$('#sidenav ul').removeAttr("id");
} else {
$('#sidenav ul').slideUp();
$('#sidenav ul').removeAttr("id");
$('#sidenav span').next('i').removeAttr('class','glyphicon glyphicon-chevron-up');
$('#sidenav span').next('i').attr('class','glyphicon glyphicon-chevron-down');
$('#sidenav span').prev('i').attr('class',"glyphicon glyphicon-list");
$(this).parent().children('a').find('span').next('i').removeAttr('class','glyphicon glyphicon-chevron-down');
$(this).parent().children('a').find('span').next('i').attr('class','glyphicon glyphicon-chevron-up');
target.slideDown();
$(this).parent("li").children('ul').attr('id','current');
}
});
});
程式碼相對精悍
相關推薦
jQuery實現側邊導航手風琴效果
側導航的手風琴效果是指,點選含子層導航的父導航時,使原本隱藏的子導航顯示,再次點選,子層導航又恢復隱藏,同時,同一時間只有一個父導航的子導航能夠顯示 $("#sidenav > li").find('.sub-nav').hide();
jQuery實現側邊導航欄效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <m
jquery實現側邊欄手風琴三級導航選單demo
jquery實現側邊欄手風琴三級導航選單 效果圖: 引入檔案,font-awesome為字型庫檔案: <link rel="stylesheet" type="text/css" href="Font-Awesome-3.2.1/css/font-aweso
jQuery實現手機豎直手風琴效果
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=
jquery實現側邊欄
效果圖如下:主要用了jquery的mouseenter和mouseleave屬性和animate動畫屬性。程式碼為:<!DOCTYPE html> <html> <hea
jquery實現側邊欄左右伸縮
jquery實現點選側邊欄伸縮效果。點選收縮,側邊欄向左收縮,顯示按鈕顯示;點選顯示按鈕,顯示按鈕向左收縮,側邊欄顯示。 具體程式碼如下: <!DOCTYPE html> <html
非常漂亮的純css3實現多彩側邊導航(非常流暢),附效果演示
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3隱藏懸浮網站左側標籤式導航欄程式碼 </title> <style type="text/css"
jQuery網站側邊隱藏展開導航插件二(轉)
osi width ica pointer 隱藏 gif xhtml and -type <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh
metisMenu.js動態側邊導航的實現(ajax動態渲染部分導航)
使用metisMenu.js實現後臺管理系統的導航,通過點選導航,切換不同的頁面內容。有些時候。我們需要動態新增頁面的內容,即通過ajax請求後臺來渲染部分導航的內容。 第一部分是靜態導航的實現,即通過點選導航切換右側頁面的實現。第二部分是動態渲染導航的實現。(demo例子
實現Material Design風格的Actionbar和Drawer側邊導航欄
<strong><span style="font-size:18px;">前言:</span></strong> 自從Google公佈了Material Design之後,Android App的UI更加好看了,動畫也n
關於Qt實現側邊欄隱藏與顯示的效果
通過ToolButton來實現某控制元件的隱藏與顯示,具體功能為點選toolbutton後,某widget(以tabWidget為例)隱藏於左側,toolbutton位於(0,0)座標處,顯示的icon也進行切換;再次點選後,tabwidget展開,toolbutton還原
js、jq兩種方法實現網頁側邊導航
js第一種方法: 實現的效果如下: 1.在側欄滑動時背景顏色切換和字型顏色切換. 2.視窗滾動時,右邊側欄隨之變化. 3.點選側欄選項,跳動到當前選項對應的頁面,並且側欄也隨之變化. 程式碼如下: html+css: *{
JQuery.HoverDir庫實現側邊欄二級選單
Jquery.hoverDir響應滑鼠移動方向的懸停效果外掛 HTML程式碼 <div id="sidebar"> <div class="mainNavs"> <div class="m
個人中心的側邊欄--用jq實現側邊欄點擊一塊出現一塊其他幾塊隱藏並且同時改變前面的img圖片
icon -a 儀器 cor 個人 con 圖片 AC 默認 實現的效果: 默認狀態下: 點擊下面的標題時: html代碼: <h2>商品分類</h2> <div class="categories"> <ul cla
SB Admin 2 修改側邊導航欄寬度
boot css 分享 側邊欄 vpd efault 寬度 inpu boa SB Admin 2, 一個免費的 bootstrap 主題,具有很廣泛使用規模,實際使用中發現,導航的側邊欄太寬了,有過右側有大型datatable,會變得很難看。 <div class
react-native + teaset(Drawer)實現側邊菜單
() ava npr img nat width let vector bottom 1.代碼 /** * 購物車 */ import React, {Component} from ‘react‘; import { View, Image, } from
側邊橫幅動畫效果
jpg var utf 而是 增強 函數 希望 永遠 20px 我們在寫頁面的時候,常見的側邊橫幅廣告是通過position:fixed實現的,這樣定位的好處是無論主體內容怎麽變化,側邊的位置永遠保持不變,當然,這也是這種效果的弊端,網頁效果死板單一,所以,我們今天就要為這
NavigationViewDemo【和DrawerLayout搭配使用實現側滑導航視圖界面】
apk nonnull cli 中心 null margin 改密碼 r文件 lin 版權聲明:本文為HaiyuKing原創文章,轉載請註明出處! 前言 主要記錄NavigationView的使用,而一般情況下NavigationView是和DrawerLayout搭配
jQuery實現加入購物車飛入動畫效果之開發不停,填坑不止(起點位置在Y軸方向位置偏移)
開發時為了完成購物車的飛入拋物線,因為懶惰隨大流使用了fly.js外掛,用的時候遇到的兩個坑坑~~ 1. 有滾動條時,拋物體的起點位置在Y軸方向上有位置偏移,偏大 2. 頁面有滾動條時,拋物體的結束位置不一樣,偏大 我:(⊙o⊙)…煩煩的。。。這就是用別人東西的代價 。。。。。。 不
Jquery實現購物車的新增動畫效果
//這塊獲取的購物車的位置 #cartN這個是購物車的id var offset = $('#cartN').offset(); //這塊是店家新增的時候的時候的操作 $(".add1").click(function () { &