怎样使页面刷新后保存保持Ul菜单展开
我把左边的菜单写成了用户自定义控件,然后放到母版页里面去,
当点击子节点,显示相关数据在右边,同时页面会刷新(整个母版页都刷新了)
刷新后,子菜单收起来了,我需要它还是展开的。我用什么方法可以使得菜单在刷新后,仍然保持展开状态?
我不是使用的treeview,而是使用的Repeater。而子菜单连接到右边的数据,是通过
<ahref="<%=Dir %>default.aspx?id=<%#Eval("ItemCategoryID") %>">XXX</a>
[解决办法]
我记得treeview有一个属性ExpandAll(); 可以展开所有子节点,你反编译下,看看如何实现的
[解决办法]
帮顶一下!!
[解决办法]
通过JS传递参数!
分别设置菜单的ID, 保存在Url里 然后通过js取得当前url的ID,通过js控制对应菜单展开..
[解决办法]
下面是一个自定义用户控件:导航菜单。 你自己建立一个用户自定义控件,然后把下面的代码贴到ascx 文件中就行
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="_menu.ascx.cs" Inherits="admin_usercontrols_menu" %>
<style type="text/css">
#webframe #master-left
{
position: relative;
float: left;
width: 15%;
height: auto;
}
#webframe #master-right
{
position: relative;
float: right;
width: 84%;
height: auto;
}
#accor-nav
{
width: 180px;
}
#accor-nav .accor-title
{
text-align: center;
}
#accor-nav .accor-title a:hover
{
color:Green;
font-weight:bold;
}
#accor-nav ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#accor-nav ul li
{
text-align: center;
margin: 2px 15px 2px 15px;
border-bottom:1px solid Gray;
height:20px;
}
#accor-nav ul li:hover{ background:url('../../images/accor-liselected.gif') no-repeat -18px ;}
#accor-nav ul li a
{
text-decoration: none;
}
#accor-nav ul li a:hover
{
color: Red;
}
</style>
<style type="text/css" id="by-ui-theme">
.ui-accordion
{
width: 180px;
}
.ui-accordion .ui-accordion-header
{
cursor: pointer;
position: relative;
text-align: center;
background: url('../../images/accor-header.gif')repeat-x left center;
margin: 5px;
margin-left: 0px;
margin-right: 0px;
height: 28px;
padding-top: 5px;
padding-bottom: 5px;
}
.ui-accordion .ui-accordion-header a
{
display: block;
font-size: 14px;
text-align: center;
color: Black;
text-decoration: none;
}
.ui-accordion-icons .ui-accordion-header a
{
padding-top: 5px;
padding-bottom: 6px;
}
.ui-accordion a.selected
{
color: Highlight;
font-size: 16px;
font-weight: bolder;
}
.ui-accordion .ui-accordion-content
{
position: relative;
display: none;
height: auto;
}
.ui-accordion .ui-accordion-content-active
{
display: block;
}
.ui-icon
{
float: left;
position: relative;
margin-left: 15px;
height: 25px;
width: 25px;
}
.ui-icon-triangle-1-s
{
background: url('../../images/accor-open.gif');
}
.ui-icon-triangle-1-e
{
background: url('../../images/accor-close.gif');
}
</style>
<script src="../../scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="../../scripts/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../../scripts/jquery.ui.accordion.js" type="text/javascript"></script>
<script src="../../scripts/jquery-corner.js" type="text/javascript"></script>
<script type="text/javascript">
var SelectChange = function (e, ui) {
var id = "#" + $(ui.newContent).attr("id");
var height = $(id).children("ul").children("li").length * 22;
$("#" + $(ui.newContent).attr("id")).height(height);
}
$().ready(function () {
$(".accor-title").corner();
$("#accor-nav ul li").corner();
$("#accor-nav").accordion({ change: SelectChange });
});
$().ready(function () {
var url = location.href.toString();
var pos = url.search(/item/);
var num = 0;
if (pos != -1)
{ num = url.slice(pos + 5); }
$("#accor-nav").accordion("activate", num - 1);
});
</script>
<div id="webframe">
<div id="master-left">
<div id="accor-nav">
<div id="accor-header1" class="accor-title">
<a href="#">商品信息管理</a></div>
<div id="accor-panel1" style="height:132px">
<ul style="height:132px">
<li id="calcheight"><a href="../products/add_product.aspx">添加商品</a></li>
<li><a href="../products/all_products.aspx">所有商品</a></li>
<li><a href="../products/shortage_products.aspx?item=1">缺货商品</a></li>
<li><a href="../products/invertory_products.aspx?item=1">库存商品</a></li>
<li><a href="../products/sale_record.aspx?item=1">销售统计</a></li>
<li><a href="../products/all_suppliers.aspx?item=1">供应商信息</a></li>
</ul>
</div>
<div id="accor-header2" class="accor-title">
<a href="#">订单信息管理</a></div>
<div id="accor-panel2">
<ul >
<li><a href="../orders/untreated_orders.aspx?item=2">未发货订单</a></li>
<li><a href="../orders/shipped_orders.aspx?item=2">已发货订单</a></li>
<li><a href="../orders/completed_orders.aspx?item=2">已完成订单</a></li>
</ul>
</div>
<div id="accor-header3" class="accor-title">
<a href="#">注册用户管理</a></div>
<div id="accor-panel3">
<ul >
<li><a href="../users/user_list.aspx?item=3">会员管理</a></li>
<li><a href="../users/message_list.aspx?item=3">留言管理</a></li>
<li><a href="../users/previews_list.aspx?item=3">评论管理</a></li>
</ul>
</div>
<div id="accor-header4" class="accor-title">
<a href="#">消息管理</a></div>
<div id="accor-panel4">
<ul >
<li><a href="../notice/add_notice.aspx?item=4">添加新消息</a></li>
<li><a href="../notice/notice_management.aspx?item=4">管理消息</a></li>
</ul>
</div>
<div id="Div1" class="accor-title">
<a href="#">其他</a></div>
<div id="Div2">
<ul >
<li><a href="../home/set.aspx?item=5">首页设置</a></li>
<li><a href="../other/admin_management.aspx?item=5">管理员管理</a></li>
</ul>
</div>
</div>
</div>
</div>