使用jQuery隐藏和显示列表菜单项 [英] Hide and Show list menu items using jQuery
问题描述
我有简单的垂直菜单使用列表元素,如下所示
I have simple vertical menu using list elements like below
<ul id="leftNav">
<li id="home"><a href="/index.html">Home</a>
</li>
<li id="apples"><a href="/category/apples.html">Apples</a>
<ul class="subMenu">
<li><a href="/category/red-apples.html">Red Apples</a>
</li>
<li><a href="/category/green-apples.html">Green Apples</a>
</li>
<li><a href="/category/golden-apples.html">Golden Apples</a>
</li>
</ul>
</li>
<li id="grapes"><a href="/category/grapes.html">Grapes</a>
<ul class="subMenu">
<li><a href="/category/red-grapes.html">Red Grapes</a>
</li>
<li><a href="/category/green-grapes.html">Green Grapes</a>
</li>
<li><a href="/category/black-grapes.html">Black Grapes</a>
</li>
</ul>
</li>
<li id="dry-fruits"><a href="/category/dry-fruits.html">Dry Fruits</a>
<ul class="subMenu">
<li id="subParent1"><a href="#">Fruits That Are Dried</a>
<ul class="subMenu1">
<li><a href="/category/figs.html">Figs</a>
</li>
<li><a href="/category/dates.html">Dates</a>
</li>
<li><a href="/category/pineapples.html">Pine Apples</a>
</li>
</ul>
</li>
<li id="subParent2"><a href="#">Nuts and Seeds</a>
<ul class="subMenu1">
<li><a href="/category/chestnuts.html">Chestnuts</a>
</li>
<li><a href="/category/almonds.html">Almonds</a>
</li>
<li><a href="/category/walnuts.html">Walnuts</a>
</li>
</ul>
</li>
<li id="subParent3"><a href="/category/bananas.html">Bananas</a>
</li>
</ul>
</li>
<li id="sale" class="expanded"><a href="/category/sale.html">Sale</a>
</ul>
我想要做的是当苹果或其子项目被点击,扩展的列表等等,所以当Grapes或其子项被点击除了Grapes部分之外的所有其他应该关闭。
What I am trying to do is when apples or its sub items are clicked I am trying keep that sections of the list expanded and so on, so when Grapes or its sub items are clicked all other should be closed except Grapes section.
我尝试使用下面的代码,苹果和葡萄是呈现其各自页面的链接,我的代码如下不工作。
I tried using code like below, but since Apples and Grapes are links which render their respective pages, my code below is not working.
$(document).ready(function() {
$("#apples .subMenu").css("display", "block");
});
任何帮助或示例或建议都可以使用。
Any help or example or advice is appreciated.
推荐答案
你不断地重新加载页面 - 和javascript重载。如果您要在请求之间保存菜单的状态,请使用Cookie。
You constantly reload page - and the javascript reloads too. If you want to save the state of the menu between requests use cookies.
或者这里是一个没有重新加载页面的版本 - 那么你必须使用Ajax。 >
Or here is a version without reloading the page - then you have to use Ajax.
<script type="text/javascript">
$(document).ready(function() {
$('#left-navigation a').click(function(){
return false;
});
$(".parent-grapes > a, .parent-apples > a, .parent-dry-fruits > a").click(function () {
var $block = $(this).parent().find(".sub-menu");
$block.toggle();
$.get($(this).attr('href'), function(data){
$('#main-content').html($(data).find('#main-content').html());
});
return false;
});
});
</script>
菜单只需要这个javascript(和JQuery)
The menu requires only this javascript (and JQuery)
这篇关于使用jQuery隐藏和显示列表菜单项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!