切换显示/隐藏问题答案

【问题标题】：Toggle show/hide issue切换显示/隐藏问题
【发布时间】：2014-01-28 22:29:42
【问题描述】：

喂，

我有个小问题，用下面的 HTML 代码和 JS

<ul class="categories">
   <a href="#" class="togglelink"><li class="furniture">Furniture</li></a>  
   <a href="" class="togglelink"><li class="general-items">General</li></a>
   <a href="" class="togglelink"><li class="cars">Cars</li></a>
   <a href="" class="togglelink"><li class="moto">Moto</li></a> 
   <a href="" class="togglelink"><li class="other-vehicles">Vehicles</li></a>
   <a href="" class="togglelink"><li class="house">House</li></a>
   <a href="" class="togglelink"><li class="boat">Boats</li></a>  
   <a href="" class="togglelink"><li class="truck">Trucks</li></a>
   <a href="" class="togglelink"><li class="fragile">Fragile</li></a>
   <a href="" class="togglelink"><li class="animals">Animals</li></a>  
   <a href="" class="togglelink"><li class="others">Others</li></a>
</ul>

假设隐藏的 DIV 内容是：

<!-- start of furniture -->
     <div class="row">
         <div class="panel panel-default panel-custom toggle" style="display: block;">
             <div class="panel-body"> 
                <p>Furniture content</p>
             </div>
         </div>
      </div>
<!-- end of furniture -->

而我使用的 JS 是：

$(document).ready(function() {   
    $('.toggle').hide();
    $('a.togglelink').click(function() {
        $('.toggle').hide();
        $(this).parent().next('.toggle').toggle('slow');
        return false;
    });
});

http://jsfiddle.net/FRde7/

唯一的问题是所有的内容 DIV 都显示出来了，没有一个像假设的那样被隐藏。

任何想法为什么这不起作用？

谢谢！

【问题讨论】：

你能解释一下你想要完成什么吗？我也看不到切换类，除非它在其他地方，我认为您的意思是 $('.togglelink').hide(); .这是示例：jsfiddle.net/54d2S
哦，我的错。我忘记了那部分！该列表使用每个类别的图标进行样式设置。例如，当我单击 moto 图标时，我希望显示该类别的隐藏 div 内容。
但您的每个类别都没有隐藏的<div> 内容。我只看到家具内容。
我只是复制了一个 div 内容，不是全部。
给我 5 分钟，我给你做个 jsfiddle，让你知道我不是。

标签： javascript html toggle hide show

【解决方案1】：

你的逻辑有问题。您可能希望通过单击的.togglelink 的索引来引用.toggle 的每个实例：

http://jsfiddle.net/isherwood/FRde7/4

$('.toggle').hide();

$('a.togglelink').click(function() {
    var myIndex = $(this).index();
    $('.toggle').hide();

    $('.toggle').eq(myIndex).toggle('slow');
    return false;
});

【讨论】：

谢谢！这就是我所需要的，很抱歉我没有清楚地解释自己。