显示和隐藏菜单（一次只显示一个）答案

【问题标题】：Show and Hide menu (where only shows one at a time)显示和隐藏菜单（一次只显示一个）
【发布时间】：2010-11-11 22:27:52
【问题描述】：

我遇到了这样的问题，我有一个包含一些隐藏子内容的菜单。当用户单击导航按钮时，会出现一些隐藏的内容。那部分很好，一切正常。

我需要知道的是，当我有一个导航项显示它的隐藏内容时。如果用户点击下一个导航项。我希望其他隐藏内容消失并出现新的隐藏内容。

我的灵感来自这个网站。 http://www.o2.co.uk/ 如果您单击导航箭头项目。对此的任何帮助都会很棒。顺便说一下，所有的显示和隐藏效果都可以正常工作。

感谢任何可以提供帮助的人..

【问题讨论】：

标签： css show-hide html slidetoggle

【解决方案1】：

我假设您是在 javascript 中执行此操作的。如果我在这里过于初级，请原谅我。

你的函数（如果你能贴出来，那会很有帮助）不仅需要改变你点击的元素的显示属性，还要改变它为 display:none;对于任何其他人。

因此，当您单击导航项时，您的 javascript 会将该列表的显示属性更改为 :block 或其他任何内容，并且还将所有其他列表更改为 display:none。这有点蛮力，所以您也可以将当前除 :none 之外的任何其他内容更改为 :none。

【讨论】：

【解决方案2】：

你需要 jQuery 来解决这个问题，但是......

首先，我们将 onClick 函数与类 'link' 绑定到每个元素我们告诉 onClick 在单击时隐藏所有具有“可隐藏”类的元素，然后在此链接中显示具有 rel 属性值 ID 的 div。 http://api.fatherstorm.com/test/4159899.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>


    <script>
            $(document).ready(function() {
                $('.link').each(function(){
                    $(this).click(function(){

                        $('.hidable').hide();
                        $($(this).attr('rel')).show();
                    });

                });
            });

        </script>



 <ul>

    <li class='link' rel='#div1'>l1</li>
    <li class='link' rel='#div2'>l2</li>
    <li class='link' rel='#div3'>l3</li>
    <li class='link' rel='#div4'>l4</li>
    <li class='link' rel='#div5'>l5</li>

        </ul>

    for the code block
    <div class='hidable' id='div1'>div 1</div>
    <div class='hidable' id='div2'>div 2</div>
    <div class='hidable' id='div3'>div 3</div>
    <div class='hidable' id='div4'>div 4</div>
    <div class='hidable' id='div5'>div 5</div>

【讨论】：