html中的元素:<ul id="accordion" class="accordion">
  <li class="licss">
   <div class="link"><i class="fa fa-home"></i></i>藏馆台账<i class="fa fa-chevron-down"></i></div>
   <ul class="submenu">
    <li><a href="#">Photoshop</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Maquetacion web</a></li>
   </ul>
  </li>
  <li class="licss">
   <div class="link"><i class="fa fa fa-bar-chart-o"></i>征集管理<i class="fa fa-chevron-down"></i></div>
   <ul class="submenu">
    <li  id="clueinfo_index">
                    <a class="J_menuItem"  href="{:U('ClueInfo/index')}">征集线索</a>
               </li>
                <li id="sourceinfo_index">
                    <a class="J_menuItem" href="{:U('SourceInfo/index')}">征集来源</a>
                </li>
                <li id="collectinfo_index">
                    <a class="J_menuItem"  id="" href="{:U('CollectInfo/index')}">征集信息</a>
                </li>              
   </ul>
  </li>
  <li class="licss">
   <div class="link"><i class="fa fa-envelope"></i>藏品编目<i class="fa fa-chevron-down"></i></div>
   <ul class="submenu">
                <li><a href="{:U('CollectionInfo/index')}">藏品登记</a>
                            </li>
                            <li><a class="J_menuItem" href="mail_detail.html">影像编目</a>
                            </li>
                            <li><a class="J_menuItem" href="mail_compose.html">藏品审核</a>
                            </li>
                             <li><a class="J_menuItem" href="mail_compose.html">总账浏览</a>
                            </li>
                             <li><a class="J_menuItem" href="mail_compose.html">藏品鉴定</a>
                            </li>
                             <li><a class="J_menuItem" href="mail_compose.html">回收站</a>
                            </li>
   </ul>
  </li>
  <li class="licss"><div class="link"><i class="fa fa-edit"></i>库房管理<i class="fa fa-chevron-down"></i></div>
   <ul class="submenu">
     <li><a class="J_menuItem" href="form_basic.html">藏品入库</a>
                            </li>
                            <li><a class="J_menuItem" href="form_validate.html">藏品移库</a>
                            </li>
                            <li><a class="J_menuItem" href="form_advanced.html">藏品出库</a>
                            </li>
                            <li><a class="J_menuItem" href="form_wizard.html">藏品归还</a>
                            </li>
                            <li><a class="J_menuItem" href="form_wizard.html">库房查询</a>
                            </li>
                             <li><a class="J_menuItem" href="form_wizard.html">日常维护</a>
                            </li>
   </ul>
  </li>
  <li class="licss"><div class="link"><i class="fa fa-desktop"></i> 藏品管理<i class="fa fa-chevron-down"></i></div>
   <ul class="submenu">
              <li><a class="J_menuItem" href="contacts.html">日常事件</a>
                            </li>
                            <li><a class="J_menuItem" href="profile.html">藏品专题</a>
                            </li>
   </ul>
  </li>
  <li class="licss"><div class="link"><i class="am-icon-th-list"></i>查询统计<i class="fa fa-chevron-down"></i></div>
   <ul class="submenu">
               <li><a class="J_menuItem" href="contacts.html">日常事件</a>
                            </li>
                            <li><a class="J_menuItem" href="profile.html">藏品专题</a>
                            </li>
   </ul>
  </li>
  <li class="licss"><div class="link"><i class="am-icon-cog"></i>系统维护<i class="fa fa-chevron-down"></i></div>
   <ul class="submenu">
               <li><a class="J_menuItem" href="{:U('CollectionType/index')}">类别维护</a>
                            </li>
                            <li><a class="J_menuItem" href="carousel.html">古汉字管理</a>
                            </li>
                            <li><a class="J_menuItem" href="blueimp.html">编目导入</a>
                            </li>
   </ul>
  </li>
 </ul>

js:

$(document).ready(function(){
  var site_url = window.location.href.toLowerCase();//此处得到url
  var arr = site_url.split("/");
  var fun = arr[6];
  fun = fun.split(".");
  var tmpmenu = '';
     tmpmenu = arr[5]+'_'+fun[0];
     var temp = "#"+ tmpmenu;
  $parent = $(temp).parent();
  $children = $(temp).children();
  $children.css({'background': '#5B6E84','color': '#FFF'});
  $parent.slideToggle();
  $parent.parent().toggleClass('open');
 });
 $(function() {
 var Accordion = function(el, multiple,link) {
  this.el = el || {};
  this.multiple = multiple || false;

// Variables privadas
  var links = this.el.find('.link');
  // Evento
  links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
}
 Accordion.prototype.dropdown = function(e) {
  var $el = e.data.el;
   $this = $(this),
   $next = $this.next();

$next.slideToggle();
  $this.parent().toggleClass('open');

if (!e.data.multiple) {
   $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
  };
 }

var accordion = new Accordion($('#accordion'), false);
});

前端开发根据url进行页面跳转控制以及实现菜单栏手风琴效果的更多相关文章

  1. ThinkPHP5.0框架开发实现简单的页面跳转

    ThinkPHP5.0框架开发实现简单的页面跳转 一.效果 登录界面 登录成功界面 登录失败界面 二.目录结构 三.代码 控制器中的Login.php <?php // 声明命名空间 names ...

  2. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  3. ios&h5混合开发项目仿app页面跳转优化

    前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...

  4. 用js 获取url 参数 页面跳转 ? 后的参数

    记得之前在原来的公司写过这个东西,但是还是忘记怎么接住参数了,只知道怎么把id传过去! 问了身边的大佬 他首先推荐了我一个链接是别人写好的方法 附上链接地址:http://blog.csdn.net/ ...

  5. 微信小程序开发(四)页面跳转

    承接上篇博客. 通过点击按钮跳转到新的页面. 先创建新页面home: 代码如下: // home.js Page({}) // 注册页面 // home.json {} // home.wxml &l ...

  6. Q:简单实现URL只能页面跳转,禁止直接访问

    sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据,且不同标签页的session不能共享,通过此特性来控制某个页面只能通过上级页面同标签页跳转 ...

  7. Android应用开发基础之六:页面跳转和数据传递

    创建第二个Activity 需要在清单文件中为其配置一个activity标签 标签中如果带有这个子节点,则会在系统中多创建一个快捷图标 <intent-filter> <action ...

  8. web前端开发,如何提高页面性能优化?

    内容方面: 1.减少 HTTP 请求 (Make Fewer HTTP Requests) 2.减少 DOM 元素数量 (Reduce the Number of DOM Elements) 3.使得 ...

  9. 通过tile和url判断页面跳转是否正确

    通过webdriver中的.title和.current_url获取title和url from time import sleep from selenium import webdriver br ...

随机推荐

  1. js中属性和方法的类型和区别

    对象的属性:私有属性(var).类属性(静态属性).对象属性(this).原型属性(prototype). 对象的方法: 私有方法(funtion).类方法(静态方法).对象方法(this).原型方法 ...

  2. sql 查看数据库物理文件路径

    方式一:用于查询all数据库,适用于SQL2005及以上版本. USE [Master] GO /****** 对象 :  Table [dbo].[Master]    脚本日期 : 06/29/2 ...

  3. T-SQL - 访问远程数据库并对其数据表进行操作

    一.概述 很多时候我们需要在.NET应用程序中使用一条SQL语句来访问来自不同服务器.不同数据库中的不同的表,实现方法有很多.我们可以在.NET应用程序中建立数据访问层,使用ADO.NET Entit ...

  4. Python初学的易犯错误

    当初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让你程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...

  5. 【IOS学习】1.IOS框架

    1.框架概述 iOS的系统架构分为四个层次:核心操作系统层(Core OS layer).核心服务层(Core Services layer).媒体层(Media layer)和可触摸层(Cocoa ...

  6. Android单元测试实践

    为什么要写单元测试 首先要介绍为什么蘑菇街支付金融这边会采用单元测试的实践.说起来比较巧,刚开始的时候,只是我一个人会写单元测试.后来老板们知道了,觉得这是件 很有价值的事情,于是就叫我负责我们组的单 ...

  7. it市场

    SAP收购Sybase意欲何为 http://tech.diannaodian.com/dw/data/sybase/2012/0925/199681.html 德国行业管理软件解决方案提供商SAP宣 ...

  8. java编译正常javac出错不是内部或外部命令

    javac不是内部或外部命令 安装jdk版本jdk-8u111-windows-x64(jdk1.8.0_111) 配置环境: JAVA_HOME D:\xiazai\Java\jdk1.8.0_11 ...

  9. Verilog HDL那些事_建模篇笔记(实验三:按键消抖)

    实验三:按键消抖 首先将按键消抖功能分成了两个模块,电平检查模块和10ms延迟模块.电平检测模块用来检测按键信号的变化(是否被按下),10ms延迟模块用来稳定电平检查模块的输入,进而稳定按键信号,防止 ...

  10. hadoop2升级的那点事情(详解)

    前言 前阵子,公司的hadoop从hadoop1.02升级到hadoop2.4.1,记录下升级的步骤和遇到的问题,和大家分享,希望别人可以少走一些弯路 技术选型 当前使用版本:     apache ...