Question

我使用了JQuery函数show_hide来隐藏一个框，然后在单击链接时显示它。一切正常。如果我想要隐藏第二个盒子，我只需重新编写该函数并重命名类和函数（最简单的方法），但是说我有一个表，因此表的内容循环因此类将永远是相同。然后，我将如何单独显示每个show_hide条目，即如果我单击show_hide链接，它将仅显示该条目的内容而不是该页面上的所有内容。

这是隐藏slidingDiv的基本代码。如果您要复制它并单击链接，您会看到所有这些都将打开。当课程相同时，我需要一种方法来打开我想要的那个。任何帮助将不胜感激。

 $(document).ready(function(){
    $("slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
    $("slidingDiv").slideToggle();
}); 
}):

.slidingDiv{
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}

<a href="#" class="show_hide">Show/hide</a>

<div class="SlidingDiv">
    <p>blah blah blah</p>
</div>

Answer 1

您可以像这样使用next()：

$('.show_hide').click(function(e){
      e.preventDefault();
      $(this).next(".SlidingDiv").slideToggle();
});

示例：http://jsfiddle.net/niklasvh/sx5TM/

Answer 2

很简单，你用$（this）

写了一个泛型函数

   $(this).hide();
    $(this).show();

jquery显示/隐藏功能

2 个答案: