Question

我有这个简单的JQuery函数来隐藏或显示表格。显示/隐藏工作，但图像（加/减）没有改变。

表格如下：

     <span id="collapsible">These are some
     new titles. 
    <table id="data">
    <tr>
    <th colspan="3">2008</th>
    </tr>
  <tr>
    <td>As You Like It</td>
    <td>Comedy</td>
    <td></td>
  </tr>
  <tr><th colspan="3">2007</th><tr>
    <tr>
    <td>Henry IV, Part I</td>
    <td>History</td>
    <td>1596</td>
  </tr>
  <tr>
    <td>Sunit Joshi</td>
    <td>History</td>
    <td>2010</td>
  </tr>
</table>

 </span>

jQuery函数是：

$(document).ready(function() {
    var collapseIcon = 'images/minus.png';

var collapseText = 'Collapse this section';

var expandIcon = 'images/plus.png';

var expandText = 'Expand this section';

var $subHead = $('#collapsible');
$subHead.prepend('<img src="' + expandIcon + '" alt="' + expandText + '" class="clickable" />')

$subHead.click(function(){
    $('#data').toggle();
    ($('#data').is(':hidden')) ? $(this).attr('src', expandIcon) : $(this).attr('src', collapseIcon);
    return false;
});

$subHead.css('cursor', 'pointer')
    .click();

}）;

任何想法在这里可能是错的。图像保持在初始“+”状态。

感谢

Answer 1

您的HTML中有几个验证错误。这可能会导致JavaScript中断或产生意外结果。通过W3C Markup Validation Service运行HTML并修复这些错误。如果它仍然无法使用有效的HTML编辑您的问题，我将进一步帮助。

OP已经回答了他的问题，但由于我在这里有代码，我也会发布我的。

有效的HTML：

<div id="collapsible">These are some new titles. 
   <table id="data">
      <tr>
         <th colspan="3">2008</th>
      </tr>
      <tr>
         <td>As You Like It</td>
         <td>Comedy</td>
         <td></td>
      </tr>
      <tr>
         <th colspan="3">2007</th>
         <td>Henry IV, Part I</td>
         <td>Hist=ry</td>
         <td>1596</td>
      </tr>
      <tr>
         <td>Sunit Joshi</td>
         <td>History</td>
         <td>2010</td>
      </tr>
   </table>
</div>

修正了Javascript：

<!--
$(document).ready(function() {
    var collapseIcon = 'images/minus.png';

    var collapseText = 'Collapse this section';

    var expandIcon = 'images/plus.png';

    var expandText = 'Expand this section';

    var $subHead = $('#collapsible');
    $subHead.prepend('<img src="' + expandIcon + '" alt="' + expandText + '" class="clickable" id="expandImage" />')

    $subHead.click(function(){
        $('#data').toggle();
        ($('#data').is(':hidden')) ? $("#expandImage").attr('src', expandIcon).attr('alt', expandText) : $("#expandImage").attr('src', collapseIcon).attr('alt', collapseText);
        console.log($(this).attr('src'));
        return false;
    });

    $subHead.css('cursor', 'pointer').click();

});
//-->

我还添加了alt attr。因为我认为你也想要它。

Answer 2

我通过给图片标签添加id来修复它。这是更新：

...以前的代码

var $subHead = $('#collapsible');
$subHead.prepend('<img id="imgpointer" src="' + expandIcon + '" class="clickable" />')

$subHead.click(function(){
    $('table#data').toggle();
    ($('table#data').is(':hidden')) 
        ? $('img#imgpointer').attr('src', expandIcon) 
        : $('img#imgpointer').attr('src', collapseIcon);
    return false;
});

......其余的代码。我将检查HTML验证错误，如MitMaro所述。

感谢苏尼特

Answer 3

好的，所以这个答案不能解决你的代码中的错误，但是我想发布稍微更通用的，可能是更好的解决方案，考虑到它使用了一些最佳实践。

下面的示例适用于层次结构中的任意数量的级别，包括复杂的场景，您希望对只有一个子级的父级进行特殊处理。它还使用Font Awesome来获得更好的字形（如果您使用的是Bootstrap，则特别有用）。也可以使用内置切换状态的复选框元素，而不是在任意元素上使用jquery切换。

所以让我们从你的表格标记开始。首先，你将+/-符号放在其中一个表格单元格中：

<tr><td>
    <input type="checkbox" id="parent1" class="txRowExpanderControl" checked>
    <label class="txRowExpanderControlLabel" for="parent1">
        <i class="rowsExpandIcon"></i>&nbsp;
    </label>{{title}}
</td></tr>

应该折叠/展开的行应该用这样的数据属性标记。

<tr data-expanderid="parent1">...</tr>
<tr data-expanderid="parent1">...</tr>

接下来，您的相关CSS类看起来像这样（注意我使用的是LESS，但如果不是，那么您可以直接在标记中嵌入fa *类）：

.txRowExpanderControl {
    display:none;   //don't show checkbox
}
.txRowExpanderControlLabel {
    cursor: pointer;    //cursor same as link
}

.rowsExpandIcon:extend(.fa all):extend(.fa-plus-square-o all) {
}
.rowsCollapseIcon:extend(.fa all):extend(.fa-minus-square-o all) {
}

.txRowVisible {
    display:table-row;
}
.txRowCollapsed {
    display:none;
}

最后，您的JavaScript看起来像这样。请注意，我正在使用比直接绑定更好的委托事件，而不是jQuery切换我使用显式开/关，所以事情很容易调试。

$("#myTable").delegate(".txRowExpanderControl", "click", function () {   
    var currentState = $(this).prop("checked");
    var expanderId = $(this).attr("id");
    var childRows = $(this).closest("tr").nextAll("tr[data-expanderid=\"" + expanderId + "\"]");
    var expanderIcon = $(this).next("label[for=\"" + expanderId + "\"]").children("i");

    if (currentState) {
        childRows.attr("class", "txRowCollapsed");
        expanderIcon.attr("class", "rowsExpandIcon");
    }
    else {
        childRows.attr("class", "txRowVisible");
        expanderIcon.attr("class", "rowsCollapseIcon");
    }
});

简单的jQuery显示/隐藏表

3 个答案: