Question

HY，

我遇到一个小问题，其中包含以下HTML代码＆amp; 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都显示出来，没有一个被隐藏起来。

为什么这不起作用？

谢谢！

Answer 1

你的逻辑是有缺陷的。您可能希望通过点击.toggle的索引来引用.togglelink的每个实例：

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;
});

切换显示/隐藏问题

1 个答案: