簡単に言えば、私がやろうとしているのは、データテーブルが折りたたまれているときに1つのグリフィコンを使用し、データテーブルが折りたたまれていないときに別のグリフィコンを使用することです。私はこれをこのコードでかなりうまく機能させています：
<script type="text/javascript">
$(function () {
$('.glyphicon').on('click', function () {
$(this).toggleClass("glyphicon-collapse-down glyphicon-collapse-up");
});
});
</script>
これは、テーブルの最初の5つの結果を表示しているときにうまく機能しますが、別のページに移動しようとしても、画像は変更されません。これも私のコード全体の問題である可能性がありますが、最初にこの部分をチェックして、誰かがより良いアイデアを持っているかどうかを確認すると思いました。ページを変更するときに、以下の関数にコールバックする必要があると想定していますが、スクリプトのスキルは最高ではありません。
これが私のコードのHTML部分です：
<table id="pluginInfo" class="table table-striped table-hover dt-responsive details-control" cellspacing="0" width="100%" style="display:none">
<thead>
<tr class = "info">
<th>Plugin ID: </th>
<th>Plugin Name: </th>
<th>Filename: </th>
<th>Plugin Type: </th>
</tr>
</thead>
<tbody>
{% for plugin in plugins %}
<tr>
<td><a id="details" href="#{{ plugin.pluginID }}" data-toggle="collapse"><i class="glyphicon glyphicon-collapse-up"></i></a>{{ plugin.pluginID }}</td>
<td>{{ plugin.pluginname }}</td>
<td>{{ plugin.filename }}</td>
<td>{{ plugin.plugin_type }}</td>
</tr>
<tr id="{{ plugin.pluginID }}" class="collapse">
<td>Hidden data 1</td>
<td>Hidden data 2</td>
<td>Hidden data 3</td>
</tr>
</tbody>
</table>
テーブルに追加された新しい行には('.gylphicon').click()イベントハンドラーが自動的にアタッチされないため、Javascriptソリューションはおそらく機能していません。
別の方法として、Bootstrap Collapseが折りたたみaria-expanded可能なアンカーに属性を追加しているという事実を利用することで、1行の純粋なCSSで同じ結果を得ることができます。
この例を試してください：
a[aria-expanded="true"] > .glyphicon-collapse-up:before { content: "\e159"; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table id="pluginInfo" class="table table-striped table-hover dt-responsive details-control" cellspacing="0" width="100%" style="">
<thead>
<tr class = "info">
<th>Plugin ID: </th>
<th>Plugin Name: </th>
<th>Filename: </th>
<th>Plugin Type: </th>
</tr>
</thead>
<tbody>
<tr>
<td><a id="details" href="#plugin1" data-toggle="collapse"><i class="glyphicon glyphicon-collapse-up"></i></a>{{ plugin.pluginID }}</td>
<td>{{ plugin.pluginname }}</td>
<td>{{ plugin.filename }}</td>
<td>{{ plugin.plugin_type }}</td>
</tr>
<tr id="plugin1" class="collapse">
<td>Hidden data 1</td>
<td>Hidden data 2</td>
<td>Hidden data 3</td>
</tr>
</tbody>
</table>CSS属性セレクターのブラウザー互換性：http：//quirksmode.org/css/selectors/
bootstrap.cssをcontent:検索して、CSSプロパティで使用する16進値を見つけることができます。.glyphicon-collapse-down
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加