Question

我有一个Divs页面，我将Everywhere Div识别为“Header”（即class =“HeaderOn”或class =“HeaderOff”），以指定Header是绿色（打开）还是灰色（关闭））。

由于我在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函数绑定到所有“Header”div，如果单击Header，它会隐藏或显示Next Sibling Div的内容。这部分工作正常。这是下一个不起作用的部分。它应该检查Next Sibling Div的“可见”状态，如果它是可见的，将“+”图标更改为“ - ”图标，如果它不可见，则将“ - ”con更改为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>

任何帮助都会非常感激，我一直在努力解决这个问题。

Answer 1

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

这使它慢慢从可见变为无形。因为它是第一个，当您使用if ($(this).next('div').is(':visible'))检查时，它将始终可见，无论是.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');

我的JQuery图像替换脚本无法正常工作

1 个答案: