切换菜单 - 在当前页面上保持菜单打开 [英] Toggle menu - keep the menu open on the current page
本文介绍了切换菜单 - 在当前页面上保持菜单打开的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个切换菜单，请参阅 JsFiddle 中的代码和功能。
I've got a toggle menu, please see code and function in JsFiddle
当您点击h3标签（例如类别1，它是一个标签）时，菜单将打开并在链接/当前页面上保持打开。
When you click on a h3 tag eg Category 1 which is an a tag, the menu opens and stays open on the linking/current page.
但是，当您再次点击h3标签（类别1）或类别1的任何子菜单（例如选项1）时，菜单将关闭，然后在当前页面上再次打开。
However when you click on h3 tag (Category1) again or any submenu for Category 1 eg Option 1, the menu collapses close and then open again on the current page.
有没有什么方法，我可以避免关闭和打开功能，当你点击当前页面上的任何链接？
Is there any way I can avoid the closing and opening function when you click on any of the links on the current page?
感谢任何代码或示例。
提前感谢。
推荐答案
http://jsfiddle.net/LcsLr / 33 /
HTML
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="productmenu">
<div class="submenublock" id="submenu1">
<h3>
<a href="#" class="link" >Category 1</a>
<a href='#' class="arrow" ></a>
</h3>
<ul class="second_level">
<li><a href="#" class="linkx">Option 1</a></li>
<li><a href="#" class="linkx">Option 2</a></li>
</ul>
</div>
<div class="submenublock" id="submenu2">
<h3><a href="#" class="link">Category 2</a></h3>
</div>
<div class="submenublock" id="submenu3">
<h3>
<a href="#" class="link">Category 3</a>
<a href='#' class="arrow" ></a>
</h3>
<ul class="second_level">
<li><a href="#" class="linkx">Option 1
</a></li>
<li><a href="#" class="linkx">Option 2
</a></li>
<li><a href="#" class="linkx">Option 3
</a></li>
</ul>
</div>
</div>
</body>
JS
$(document).ready(function() {
$('h3,.second_level li').each(function(){
var href = $(this).children('a').attr('href');
if(window.location.pathname.search(href) != -1) {
$(this).children('a').addClass('currentPage')
}
});
$('.currentPage').each(function(){
var parent;
if($(this).parent('h3').length > 0){
parent = $(this).parent('h3');
}
else{
parent = $(this).parents('ul').siblings('h3');
}
$(parent).children('.arrow').addClass('open');
$(parent).siblings('ul').show();
});
$('.link').click(function() {
OpenParent($(this).parent('h3'));
window.location = $(this).attr('href');
});
$('.arrow').click(function(e){
e.preventDefault();
OpenParent($(this).parent('h3'));
});
});
function OpenParent(CurrentParent){
var currentArrow = $(CurrentParent).children('.arrow');
$('.open').not(currentArrow ).removeClass('open').parent().siblings('ul').slideUp('fast');
currentArrow.toggleClass('open');
$(CurrentParent).next().slideToggle('fast');
}
CSS >
CSS
#sidebar {
float:left;
width:220px;
}
#productmenu { width:220px; margin-left: 0px;}
.submenublock{
margin: 0px;
padding: 0px;
}
.submenublock h3{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0px;
border-bottom:#CCC 1px solid;
}
.submenublock h3 a{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-decoration:none;
color: #000000;
}
.submenublock h3 a:hover, .submenublock h3 a:active, .submenublock h3 a:focus
{
color: #00aeef;
}
.second_level{
list-style-type:none;
list-style:none;
margin:0px;
padding:0px;
}
.second_level li{
list-style-type:none;
list-style:none;
display: block;
border-bottom:#CCC 1px dashed;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
/* background:url(images/menuarrowright.gif) no-repeat right;*/
}
.second_level li a{
display: block;
margin-left:15px;
text-decoration:none;
color:#000000;
}
#productmenu ul li a:hover, #productmenu ul li a:active, #productmenu ul li a:focus
{
color: #00aeef;
}
.second_level{
display:none;
}
a.currentPage{
color:blue !important;
}
.link{
padding:10px;15px;
display:block;
}
.linkx{
padding:10px;15px;
display:block;
}
.arrow{
background:url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 2px;
float:right;
height:17px;
width:13px;
margin-top:-27px;
}
.open{
background:url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 2px;
}
</style>
这篇关于切换菜单 - 在当前页面上保持菜单打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
