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、まだ機能していません。それを行う他の方法はありますか？

私が望むのは、もちろん aclass="showhide"をクリックしたときに、 div class="more" の内容がテーブルの行の下 (および次の行の前) に表示されることだけです。

これをプラグイン DataTables と一緒に使用していますが、問題は発生していません。

4

3 に答える 3

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 に答える