时间戳

首页 > 解决方案 > jQuery 隐藏仅在切换全屏时有效

javascript - jQuery 隐藏仅在切换全屏时有效

问题描述

我想用 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 类“隐藏”只是隐藏了 div

    <style type="text/css">
        .hidden {
     display:none;
}
    </style>

我的脚本在第 1460 行

    <script>
function toggler(divId) {
  $("#" + divId).toggle("slow");
}

</script>

标签： javascripthtmljquerycss

解决方案

来自 JQuery 的文档：

在没有参数的情况下，该.toggle()方法只是简单地切换元素的可见性 [...] 通过更改 CSS 显示属性，匹配的元素将立即显示或隐藏，没有动画。

这意味着 JQuery 是直接修改内联样式属性。

您的问题来自您将此项目的display属性设置为none另一个位置（您的 CSS）的事实。因此，无论 JQuery 做什么，您的按钮 100% 的时间都是隐藏的。

就像你用窗帘盖住了某个东西，然后尝试用另一个窗帘盖住它再次隐藏它......只是拉回第二个窗帘并想知道为什么你的物体不可见 - 它仍然被第一幕！

去掉多余的 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解决问题，并且Ver más按钮成功隐藏了div.

推荐阅读