1

我有一个结构如下的表：

<table id="example">
<thead>
<tr>
    <th>Header1</th>
    <th>Header2</th>
    <th>Header3</th>
</tr>
</thead>

<tbody>
<tr>
   <td>some php to get custom field</td>
   <td>also custom field- the loop is above so this is working as it should</td>
   <td>
   <a href="#" class="showhide"> 
    <div class="more">
     .. the content I want to show when user clicks a class="showhide"
    </div>
   </a>
   </td>
<tr>
</tbody>
</table>

我尝试用 jQuery 实现，但没有任何反应。这是我尝试过的 jQuery：

$(function () {
    $('.showhide').click(function () {
        $(this).next().toggle()
    });
});

我也成功了document.ready，但仍然无法正常工作。有没有其他方法可以做到这一点？

我想要的是 div class="more" 的内容将显示在表格中的行下方（并且在下一个之前），当然是在单击 a 时class="showhide"。

我将它与插件 DataTables 一起使用，但这不会引起问题。

4

3 回答 3

4

你上的课showmore不是showhide

现场演示

$(function() {
  $('.showmore').click(function(){
    $(this).next().toggle()
  });
});

div根据 OP 评论进行编辑：我缩短了html 以使其简单并去掉a标签。

现场演示

html

<table id="example">
    <tbody>
        <tr>
            <td> <a href="#" class="showhide"> Show / Hide </a>

                <div class="more">.. the content I want to show when user clicks a class="showmore"</div>
            </td>
        </tr>
    </tbody>
</table>

Javascript

$(function () {
    $('.showhide').click(function () {
        $(this).next().toggle()
    });
});
于 2013-03-13T11:24:28.370 回答
2

在标记中更改它：

 class="showmore">

对此：

 class="showhide">

或这样做：

$('.showmore').click(function (e) {
    e.preventDefault();
    $(this).next().toggle()
});

笔记：

这是无效的 html：

<a href="#" class="showhide"> 
<div class="more">
 .. the content I want to show when user clicks a class="showhide"
</div>

改为：

<a href="#" class="showmore">show more</a> 
<div class="more">
 .. the content I want to show when user clicks a class="showhide"
</div>

或者你可以试试这个.children()不带.next()：

$('.showmore').click(function (e) {
    e.preventDefault();
    $(this).children('more').toggle();
});

在这里尝试小提琴

于 2013-03-13T11:29:06.183 回答
0 
$(document).on('click','.showmore',function(){
//your code..
})
于 2013-03-13T11:25:34.577 回答