1

我有一个 Divs 页面，我将每个其他 Div 标识为“标题”（即 class="HeaderOn" 或 class="HeaderOff"，以指定标题是绿色（打开）还是灰色（关闭）。

由于我在 Class="HeaderOff" 的 div 之后隐藏了任何 Div 的所有 Div 内容，我想在该 Div 的文本前面放置一个“+”图标，并在“HeaderOn”前面放置一个“-”图标div 文本。

我使用这个 jquery 来实现这一点，而且效果非常好。

$("div .HeaderOff").prepend("<img src='Images/Expand.jpg' align='absbottom' />");
$("div .HeaderOn").not(':first').prepend("<img src='Images/Collapse.jpg' align='absbottom' />");

这会将页面上的“+”或“-”图标放在“标题”div 的文本前面。

然后我调用这个脚本：

$("div [id$='Header']").click( function () {
$(this).next('div').toggle('slow');
if ($(this).next('div').is(':visible')) {
    $(this).children('img').attr('src', 'Images/Collapse.jpg');
} else {
    $(this).children('img').attr('src', 'Images/Expand.jpg');
}
});

此脚本旨在将 Click 函数绑定到所有“标题”div，并使其在单击标题时隐藏或显示下一个兄弟 div 的内容。这部分工作正常。这是下一个不起作用的部分。它应该检查下一个兄弟Div的“可见”状态，如果它是可见的，将“+”图标更改为“-”图标，如果它不可见，将“-”更改为a “+”图标。同样，这部分不起作用。我不知道为什么。它会将它从“+”更改为“-”，但不会从“-”更改为“+”

这是整个文档就绪功能：

<script type="text/javascript">
$("document").ready(function() {
    $("div .HeaderOff").prepend("<img src='Images/Expand.jpg' align='absbottom' />");
    $("div .HeaderOn").not(':first').prepend("<img src='Images/Collapse.jpg' align='absbottom' />");
    $("#ResponseMessage").toggle();
    $(".DatePicker").datepicker({ dateFormat: "yy-mm-dd" });
    $("div [id$='Header']").click( function () {
        $(this).next('div').toggle('slow');
        if ($(this).next('div').is(':visible')) {
            $(this).children('img').attr('src', 'Images/Collapse.jpg');
        } else {
            $(this).children('img').attr('src', 'Images/Expand.jpg');
        }
    });

    $("#PartNumber").on ("keyup",  function (evt) {
        $("#ResponseMessage").text('KeyUp Updated').toggle().delay(500).toggle('slow');
    });

    $(".OnChange").on ("change",  function (evt) {
        $("#ResponseMessage").text('Change Updated').toggle().delay(500).toggle('slow');
    });

});

</script>

以及 Div 结构的示例：

<div id="InventoryPhotosHeader" class="HeaderOff">
Photos
</div>
<div id="InventoryPhotos">

</div>
<div id="CrossSellHeader" class="HeaderOff">
CrossSells
</div>
<div id="CrossSell">

</div>

任何帮助将不胜感激，我一直在努力解决这个问题。

4

1 回答 1

0 
$(this).next('div').toggle('slow');

这使它慢慢地从可见变为不可见。因为它是第一个，所以在您检查时它if ($(this).next('div').is(':visible'))总是可见的，无论是 0.01% 的不透明度还是 99.99%。检查发生后，您应该将其移至。

    if ($(this).next('div').is(':visible')) {
        $(this).children('img').attr('src', 'Images/Collapse.jpg');
    } else {
        $(this).children('img').attr('src', 'Images/Expand.jpg');
    }
     $(this).next('div').toggle('slow');
于 2013-04-30T05:34:46.160 回答