[英]jQuery hide only works when toggling fullscreen
我想用 jQuery 切換隱藏“myDIV”。 在移動設備上完美運行,但在桌面上按下按鈕時,只有在按下按鈕后切換全屏時才有效,否則無效。 以前有人遇到過這個問題嗎?
這是該網站的鏈接:
https://mkt.partners/analytical/draft.html
按鈕在第 616 行
<a onclick="javascript:toggler('myDIV');" class="btn btn-primary lookbook-action"><b>Ver más.</b></a>
我試圖隱藏的 div 在第 618 行
<div id="myDIV" class="hidden">
CSS class “隱藏”只是隱藏了 div
<style type="text/css">
.hidden {
display:none;
}
</style>
我的腳本在第 1460 行
<script>
function toggler(divId) {
$("#" + divId).toggle("slow");
}
</script>
來自 JQuery 的文檔:
在沒有參數的情況下,
.toggle()
方法只是簡單地切換元素的可見性 [...] 通過更改 CSS 顯示屬性,匹配的元素將立即顯示或隱藏,沒有 animation。
這意味着 JQuery 是直接修改內聯樣式屬性。
您的問題來自這樣一個事實,即您在其他位置(您的 CSS)將此項目的display
屬性設置為none
。 因此,無論 JQuery 做什么,您的按鈕 100% 的時間都是隱藏的。
就像您用窗簾蓋住了一些東西,然后嘗試用另一個窗簾蓋住它再次隱藏它......只是拉回第二個窗簾並想知道為什么您的 object 不可見 - 它仍然被第一幕!
去掉多余的 CSS( hidden
類),讓 JQuery 處理隱藏。
function toggler(divId) { $("#" + divId).toggle("slow"); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myDIV" style="background-color: red; width: 5em; height: 5em;"></div> <,-- Use a button, not an anchor; since this isn't a link --> <button onclick="toggler('myDIV')," class="btn btn-primary lookbook-action"> <.-- <b> tags are deprecated, use strong instead --> <strong>Ver más.</strong> </button>
整個“這適用於桌面,但只有當你全屏時,它總是適用於移動設備”這件事讓我覺得你在一些媒體查詢或其他東西背后有這個 CSS 事故。
我測試了您提供的實時鏈接,只需關閉display: none
在我的 DevTools 中的.hidden
class 修復了問題,並且Ver más按鈕成功隱藏了div
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.