Question

简单地说，我正在尝试做的是在数据表折叠时使用一个glyphicon，而在数据表未折叠时使用另一个glyphicon。我对这段代码工作得相当好：

<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>

Answer 1

Javascript解决方案可能无法正常工作，因为添加到表中的新行不会自动附加('.gylphicon').click()事件处理程序。

作为替代方案，您可以通过利用Bootstrap Collapse向可折叠锚点添加aria-expanded属性这一事实，使用一行纯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 .glyphicon-collapse-down媒体资源中使用的十六进制值

Answer 2

事件处理程序附加到脚本运行时dom中存在的所有元素。

.on会捕获冒充到您附加元素的事件。

尝试从dom树中较高的元素调用.on。

也许：$('#pluginInfo').on('click', '.glyphicon') function () { ... });

使用jQuery / Bootstrap

2 个答案: