我一直有这个隐藏bug的问题只会影响safari。这是一个简单的垂直滚动条，隐藏列表中的第一个元素，然后显示最后一个元素。并且除了野生动物园以外的所有工作。问题似乎是我在这里工作的div共享同一个类，但有＃mycollectioncomment1，＃mycollectioncomment2，＃mycollectioncomment3等唯一的ID ...但是只隐藏其中一个div隐藏了所有其他共享同一个类的div 。我试过.fadeOut（0），每个人都建议作为工作，但它只是在这里工作。
var commentListCount = $(".myCollectionLatest").size();
var mycollclickCount = 0;
var showingcomments = 5;
if ($('.licomment').size() > 0) {
showingcomments = 4;
//alert("this");
}
if ($('.lookInSeasonList').size() > 0) {
showingcomments = 5;
}
if ($('.lookDescMiddle').size() > 0) {
showingcomments = 8;
}
if ($('.MyCollectionsCollectionHolder').size() > 0) {
showingcomments = 5;
}
// if (commentListCount > 5) {
$(".myCollectionLatest").hide();
for (i = 0; i < showingcomments; i++) {
$("#mycollectioncomment" + i).show();
}
$('#mycolldown').click(function () {
var element1, element2;
if (showingcomments <= commentListCount) {
mycollclickCount++;
element1 = $("#mycollectioncomment" + mycollclickCount.toString());
element2 = $("#mycollectioncomment" + showingcomments.toString());
element1.closest('.licomment').hide();
element2.closest('.licomment').show();
showingcomments++;
}
});
$('#mycollup').click(function () {
if (showingcomments <= 5) {
} else {
$("#mycollectioncomment" + mycollclickCount.toString()).show();
$("#mycollectioncomment" + mycollclickCount.toString()).closest('.licomment').show();
mycollclickCount--;
showingcomments--;
$("#mycollectioncomment" + showingcomments.toString()).hide();
$("#mycollectioncomment" + showingcomments.toString()).closest('.licomment').show();
}
});
--- html标记---
<div style="width:260px;
height:975px;
float:left;
border-right:solid 1px #e70079;
border-bottom:solid 1px #e70079;
border-left:solid 1px #e70079;
margin-top:180px;">
<h2 align="center">
<br />
COLLECTION LATEST
</h2>
<img src="/images/my-collection/black-up.jpg" id="mycollup" /><ul><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment1"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6855"><img src="/media/6855/makeuo_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6855" class="usernamelinkdiv">CHARLOTTE</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/face/powder/pressed-powder.aspx">PRESSED POWDER</a></span></b><p>put this on after foundation. its the best cover powder + re...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6855">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment2"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6331"><img src="/media/6331/26462_1267423081357_1103204986_2592317_7875205_n_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6331" class="usernamelinkdiv">ANN</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/eyes/eyeshadow/brilliant-shimmer-duo-eye-wands.aspx">BRILLIANT SHIMMER DUO EYE WANDS</a></span></b><p>Likewise Natasha, i thought it would be a great product as i...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6331">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment3"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=5168"><img src="/media/5168/P03-09-09_11.36_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=5168">SINYEE</a> SAID
</b><p>i used to use this.
but now it doesnt seem to go on my skin...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=5168">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment4"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6941"><img src="/media/6941/purple 2_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6941">MARIA</a> SAID
</b><p>I love this product, not used creme blush for years so just ...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6941">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment5"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=6329"><img src="/media/6329/snapshot_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=6329" class="usernamelinkdiv">ALICE</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/eyes/mascara/collagen-curl-mascara.aspx">COLLAGEN CURL MASCARA</a></span></b><p>
if you put a few drops of water in it,
you will be stunne...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=6329">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment6"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=4466"><img src="/media/4466/DSC00260_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=4466" class="usernamelinkdiv">KATE</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/eyes/eyeshadow/eye-palettes.aspx">EYE PALETTES</a></span></b><p>Went to Superdrug and saw these, i bought the pop-tastic pal...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=4466">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment7"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=4756"><img src="/media/4756/dfgdf_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=4756">JULIE</a> SAID
</b><p>They are great and look amazing on thier own with some masca...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=4756">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment8"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=7006"><img src="/media/7006/IMG_1441_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=7006" class="usernamelinkdiv">ABIR</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/eyes/mascara/big-fake-false-lash-effect-mascara.aspx">BIG FAKE FALSE LASH EFFECT MASCARA</a></span></b><p>It's no good. since the time i started using it i have had m...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=7006">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment9"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=5242"><img src="/media/5242/me_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=5242" class="usernamelinkdiv">REIKO</a> SAID ABOUT
<span class="pinkTxt"><br /><a href="/products/eyes/eyeshadow/dazzle-me!-eye-dust.aspx">DAZZLE ME! EYE DUST</a></span></b><p>Brilliant Pigment Eye shadow dusts, stop wasting your money ...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=5242">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li><li class="licomment"><div class="myCollectionLatest" id="mycollectioncomment10"><div style="float:left;"><div class="colltoppic"><a href="/my-collection.aspx?memberId=5048"><img src="/media/5048/Melissa x_main.jpg" width="74" height="74" onerror="ImgError(this);" /></a></div><div class="collbottompic" /><div style="float:left; position:absolute; margin-left:83px; margin-top:-84px;" class="mycolllatestlinks"><b><a href="/my-collection.aspx?memberId=5048">MELISSA</a> SAID
</b><p>I have the whole collection and wear it everyday :D I absolu...
</p></div><div class="randomCommentsSeeMore"><span class="pinkTxt"><a href="/my-collection.aspx?memberId=5048">
See more <img src="/images/navControls/more-arrow.jpg" alt="see more" /></a></span></div></div></div></li></ul><img src="/images/my-collection/black-down.jpg" id="mycolldown" /><script>
if (BrowserDetect.browser == "Safari") {
if ($('#myCollectionFeaturedCollection').size() == 1) {
$('#mycolldown').css({ "margin-top": "580px !important" });
} else {
$('#mycolldown').css({ "margin-top": "380px !important" });
}
}
</script>
<!--<img src="/images/my-collection/black-up.jpg" id="mycollup" /><ul /><img src="/images/my-collection/black-down.jpg" id="mycolldown" /> -->
</div>
答案 0 :(得分：1)
我不知道这是否是问题，但您使用的是无效标记：
<div class="collbottompic" />
我在Safari中收到的错误消息是：
<div>上使用的XML自动关闭标记语法。 标签不会关闭。
可能是这会弄乱标记的其余部分。我先解决这个问题。
答案 1 :(得分：0)
您应优化代码：
$('#mycolldown').click(function () {
var element1, element2, licom, myColCom;
if (showingcomments <= commentListCount) {
mycollclickCount++;
licom = '.licomment';
myColCom = '#mycollectioncomment';
element1 = $([myColCom, mycollclickCount].join(''));
element2 = $([myColCom, showingcomments].join(''));
element1.closest(licom).hide();
element2.closest(licom).show();
showingcomments++;
}
});
<强>附录
我发现你可能错误地使用closest()（或者可能没有，因为它适用于除Safari之外的所有内容）。如果您要定位的元素不是祖先，closest()将使您失败。无论如何，我们需要看一些标记来进一步诊断问题。
答案 2 :(得分：0)
这就是答案^列表html是由xslt生成的，当其中一个div没有被分配任何innerHTML时，它变成了。我需要勾选你的答案，但是不能记住我的密码才能登录。我一进门就会打错！