二级菜单打开后页面刷新不收缩效果

  最近正好有一个左侧导航栏的二级菜单打开后刷新页面默认开启的需求,但查阅一些资料后,发现方法都不是很方便,便自己动手写了一个。

我用了cookie来存一些值来用作判定。

1.首先你需要引入<script src="assets/js/jquery.min.js"></script>和<script src="assets/js/jquery.cookie.js"></script>

2.下面是我的菜单格式

3.然后可以接在菜单代码下面用js直接控制效果,我采用的cookie存值判定的方式,为ul添加或移除ulop的class属性

4.然后可以接着在下面写js

5.当然,文件引入和js内容可以根据需要自己调整,总之大概方法就是这样的,希望大家多多支持博客园!

时间: 2024-10-12 18:13:20

二级菜单打开后页面刷新不收缩效果的相关文章

react项目打包后路径找不到,项目打开后页面空白的问题

使用 npm install -g create-react-app快速生成项目脚手架打包后出现资源找不到的路径问题: 解决办法:在package.json设置homepage 原文地址:https://www.cnblogs.com/lan-cheng/p/10541606.html

Form提交表单后页面刷新不跳转的实现

<form action="" id="" method="post" target="nm_iframe"> <input type="text" id="input_text" name="input_text"/> <input type="submit" id="sobmit" name=&

jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果

html: <div class="col-sm-3 col-md-2 sidebar"> <div class="totalt"><a>系统管理系统</a></div> <ul class="menu"> <li class="title"> <a class="item item1"><span cla

js实现二级菜单显示和收缩

window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=

使用sessionStorage解决vuex在页面刷新后数据被清除的问题

https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度 我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态

解决vue单页面跳转返回后页面不刷新的问题

一.问题:在vue项目中通过location.href跳转到第三方页面,然后点击浏览器返回按钮回到自己的页面,用nginx起服务页面不刷新,在用node起服务中页面是正常刷新的: 二.产生该问题的原因:微信浏览器对页面进行缓存: 三.解决方案: 1 window.onpageshow = null; 2 window.onpageshow = function(event){ 3 location.reload() 4 } 5 window.location.href = 'https://ww

vue通过路由传值及在页面刷新后如何保存值

1.普通的路由跳转 方式一:通过routerLinkTo方式,转为a标签的跳转,to里面相当于a标签的href路径 如下: 方式二:通过this.$router.push方式: 如下: 2.带参数的路由跳转 通过动态参数:通过这种方式传递的参数在刷新后不会消失,但会显示在url路径上 router设置如下: 跳转方式: 接收路由参数方式: 通过params和query等方式:query和path为一个组合,params和name为一个组合,不同之处在于query方式会显示在url上,而param

解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形如:localhost:3000/#/free-lesson的路由,另一种是browserHistory的形式,形如:localhost:3000/person-center的真实URL路由.在实际项目中常常用真实的URL的方式,但是该形式存在一个隐藏的问题,就是项目打包后,浏览器页面刷新会出现40

解决window.history.go(-1)执行后不刷新页面的问题

在iphone上出现了window.history.go(-1)执行后不刷新页面的问题,安卓不会有这个问题. 解决方法为在返回后的页面加上: window.addEventListener('pageshow', function(e) { //如果检测到页面是从“往返缓存”中读取的,刷新页面 if (e.persisted) { window.location.reload(); } }); 原文地址:https://www.cnblogs.com/luoyihao/p/12665868.ht