Question

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

Answer 1

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

你可以使用jquery hide（）和show（）函数。

让要隐藏的div的id为hidden_div，让菜单项为menu_item，下一个按钮为next，

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

$(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/

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

2 个答案: