[英]make submenu item selected
I got a jquery vertical accordion menu from this website . 我从这个网站上得到了一个jQuery垂直手风琴菜单。 And when you click on the menu it gets an active class added so you can control the look of this item when you have clicked it.
而且,当您单击菜单时,它会添加一个活动类,因此您可以在单击该项目时控制它的外观。 I also want to do this with the sub menu.
我也想通过子菜单来做到这一点。 But I have no javascript skills.
但是我没有JavaScript技能。 Can someone help me with this.
有人可以帮我弄这个吗。
this is the javascript: 这是javascript:
jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.acitem', this).hide();
$('li.expand > .acitem', this).show();
$('li.expand > .acitem', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
}
else {
$(this).prev().removeClass('active');
}
});
return false;
}
else {
if(theElement.hasClass('acitem') && theElement.is(':visible')) {
if($(parent).hasClass('collapsible')) {
$('.acitem:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
}
);
return false;
}
return false;
}
if(theElement.hasClass('acitem') && !theElement.is(':visible')) {
$('.acitem:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
}); }); };
};
$(document).ready(function() {$('.menu').initMenu();}); $(document).ready(function(){$('。menu')。initMenu();});
This is the html: 这是html:
<ul class="menu collapsible">
<li>
<a href="#">PROJECTS</a>
<ul class="acitem">
<li><a href="#">~ RESIDENTIAL</a></li>
<li><a href="#">~ COMMERCIAL</a></li>
<li><a href="#">~ MIXED USE</a></li>
<li><a href="#">~ URBAN DESIGN</a></li>
<li><a href="#">~ COMPETITIONS</a></li>
<li><a href="#">~ INTERIOR DESIGN</a></li>
<li><a href="#">~ SURVEY</a></li>
<li><a href="prj-opdekaart.html" target="_blank">~ ON THE MAP</a></li>
</ul>
</li>
<li>
<a href="#">OFFICE</a>
<ul class="acitem">
<li><a href="#">~ INFO</a></li>
<li><a href="#">~ EMPLOYEES</a></li>
<li><a href="#">~ VACANCY</a></li>
<li><a href="#">~ DOWNLOAD</a></li>
</ul>
</li>
<li>
<a href="#">CONTACT</a>
<ul class="acitem">
<li><a href="#">~ ADDRESS</a></li>
<li><a href="#">~ E-MAIL</a></li>
</ul>
</li>
When you click on projects or office or contact. 当您单击项目或办公室或联系人时。 those get a class active added so it can be controlled (color) with css.
那些添加了活动类,因此可以使用css对其进行控制(颜色)。 I want this also if you click on residential or commercial etc (those I call submenu).
如果您单击住宅或商业等(我称为子菜单),我也要这样做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.