我有一个下拉菜单,可以通过单击展开。默认情况下,菜单是折叠的。如果其中一个子菜单页面处于活动状态,我希望菜单显示为展开状态。我希望这是清楚的。这是我的密码。
HTML
<li class="dropdown">
<a class="disablelink" href="#">Carbohydrates, proteins & fats</a>
<ul class="sub_navigation">
<li><a href="carbohydrates.php">Carbohydrates</a></li>
<li><a href="proteins.php">Proteins</a></li>
<li><a href="fats.php">Fats</a></li>
</ul>
</li>
jQuery
$(document).ready(function() {
$('.dropdown').click(function() {
// When the event is triggered, grab the current element 'this' and
// find it's children '.sub_navigation' and display/hide them
$(this).find('.sub_navigation').slideToggle();
});
$(".disablelink").click(function(e) {
e.preventDefault();
});
});
因此,如果用户在carbohydrates.php
、proteins.php
或fats.php
上,我希望展开菜单。不过我不知道该怎么做。有人能帮忙吗?
例如,当页面处于活动状态时,您需要为其链接提供一个额外的类;
<li class="current_page"><a href="carbohydrates.php">Carbohydrates</a></li>
。
然后,您可以使用jQuery循环浏览菜单,并在任何菜单项都有类的情况下展开它。
$('.dropdown li').each(function() {
if ($(this).hasClass('current_page')) {
$(this).closest('.sub_navigation').slideDown();
}
});
演示:http://jsfiddle.net/R7gkw/