javascript - 显示/隐藏菜单子链接的内容并在单击下一个新链接时关闭内容

Question

我正在寻找一种解决方案，它也必须在 IE 中工作，我可以隐藏内容，然后当您单击其中一个菜单项时，它会显示内容。但是，在用户单击下一个链接之前，内容不会隐藏...

Answer 1

请检查此链接 http://jsfiddle.net/varada/YLX9x/

您可以为此使用 jquery hide() 和 show() 函数。

设要隐藏的div的id为hidden_​​div，菜单项为menu_item，next按钮为next，

导入 jquery.js 并编写 ready 函数如下..

$(document).ready(function() {

$('#menu_item').click(function() {
$('#hidden_div').show();
});

$('#next').click(function() {
$('#hidden_div').hide();
});


});

或者如果您的意思是在他单击菜单项上的下一个链接之前内容可见，请在菜单项中添加一个类名，例如 menu_class 并编写代码

$('.menu_class').click(function() {
    $('#hidden_div').hide();
    });

代替$('#next').click(function()

如果您有类似的菜单

<ul>
<li class='menu_class'>item 1</li>
<li id='menu_item' >item 2</li>
<li class='menu_class'>item 3</li>
</ul>

和 div

<div id='hidde_div' style='display:none'>
content
</div>

然后，如果您单击第 2 项，则会显示 div。如果您单击第 1 项或第 3 项，它将被隐藏。确保您使用的是代码 $('.menu_class').click(function() {

Answer 2

html:

<li class="main"><a href="#">Web</a> 
    <ul>
        <li><a href="#" class="a1">Designing</a></li>
        <li><a href="#" class="a2">Development</a></li>
    </ul>
</li>
<li class="main"><a href="#">IT</a>
    <ul>
        <li><a href="#" class="a1">Sales & Service</a></li>
        <li><a href="#" class="a2">CCTV</a></li>
        <li><a href="#" class="a3">DVR</a></li>
    </ul>
</li>
<li class="main"><a href="#">ITES</a>
    <ul>
        <li><a href="#" class="a1">BPO</a></li>
        <li><a href="#" class="a2">Online Portal</a></li>
        <li><a href="#" class="a3">Online Marketing</a></li>
    </ul>
</li>​

js：

$(document).ready(function(){
    $('li  ul:not(:first)').hide();
    $('ul li').click(function(){
        $(this).closest('.main').next().find('ul').show();
        $(this).closest('ul').hide();
    });
});​

http://jsfiddle.net/7QheB/