0

好的，假设我有一张如下所示的表格：

<table class="first-table" border="1" width="400px">
   <tr>
       <td><?php echo $row_cond['title']; ?></td>
       <td><a class="more" href="#" onClick="slideup()">Display More</a></td>
   </tr>
   <tr class="full_result">
       <td colspan="2"><?php echo $row_cond['description']; ?></td>
   </tr>
</table>

您可以看到我有一个链接，单击该链接将调用该slideUp()函数以显示或隐藏带有“full_result”类的tr：

var command = false;
function slideup() { //New function SlidUp
    if (command == false){
         $('.full_result').fadeIn();
         $('.more').text('Display More');
         command = true;
    }else{
         $('.full_result').hide();
         $('.more').text('Display Less');
         command = false;
    }
}

所以诀窍是，这是在一个while循环中，并且重复了很多次。那么我该如何做到这一点，以便当我单击链接时，只有类“full_result”显示在我单击链接的表中。

在我单击任何表格中的按钮时，所有类同时显示和隐藏。

我的解决方案

$('.full_result').hide();
$(".more").on("click",function(){
    $('.more').html('Display More');
    $('.full_result').hide();
    $(this).parents("tr").next().next().fadeIn();
    $(this).html('');
    return false; //This stops the page jumping to the top of the page when I click the link
});
4

4 回答 4

1

尝试以这种方式更改您的 JS 代码并从“.more”链接中删除“onClick”属性：

var command = false;
$(".more").on("click",function(){
    if (command == false){
         $(this).parents("tr").next().fadeIn();
         $(this).html('Display Less');
         command = true;
    }else{
          $(this).parents("tr").next().hide();
         $(this).html('Display More');
         command = false;
    }
});

见jsfiddle

编辑

如果您在“”行下方有不止一行，.more您可以使用它.nextAll()来显示/隐藏所有下一行。并且只是.slideToggle()用来避免使用“ var command”。这段代码：

$(".more").on("click",function(){    
         $(this).parents("tr").nextAll().fadeToggle();
         if($(this).html()=="Display More") $(this).html('Display Less');            
         else $(this).html('Display More');
});

查看新的JSFiddle

于 2012-09-06T07:32:17.840 回答
0

您可以在 table 上有一个 common 类并参考所需的 tr 如下

1）在表标签上有一些通用类。例如：
2）脚本应如下所示。有了这个，你不必调用内联函数。

$(document).on('click', '.tr-hidable .more',function(){
  if (command == false){
    $(this).parents('tr-hidable').first().find('full-result').fadeIn();
    $(this).text('Display More');
    command = true;
  }else{
    $(this).parents('tr-hidable').first().find('full-result').fadeOut();
    $(this).text('Display Less');
    command = false;
  }
});

或者如果我们没有任何动态元素，我们可以将脚本的第一行替换为下面的行，所有的挖掘脚本将保持不变。

$('.tr-hidable .more').on('click',function(){

希望能帮助到你！

于 2012-09-06T07:32:42.783 回答
0

试试这个

代码

<table class="first-table" border="1" width="400px">
   <tr>
       <td><?php echo $row_cond['title']; ?></td>
       <td><a class="more" href="#">Display More</a></td>
   </tr>
   <tr class="full_result">
       <td colspan="2"><?php echo $row_cond['description']; ?></td>
   </tr>
</table>

JS代码

$('.more').on('click', function(){
    slideup();

});
var command = true;
function slideup() { //New function SlidUp
    alert('ok');
    if (command == true){
         $('.full_result').fadeIn(400);
         $('.more').text('Display More');
         command = false;
    }else{
         $('.full_result').hide();
         $('.more').text('Display Less');
         command = true;
    }
}
于 2012-09-06T07:37:36.787 回答
0

您可以尝试以下方法：

$('.more').on('click',function(){
    var text = $(this).text() === "Display More" ? "Display Less" : "Display More";
    $(this).text(text)
           .closest('table').children('.full_result').fadeToggle();
});
于 2012-09-06T08:07:31.887 回答