如何在页面加载时设置 jquery 切换关闭

How do I set jquery toggle OFF on page load?

本文关键字：jquery 设置 加载      更新时间：2023-09-26

问候我有以下javascript控制我的页面上的一些DOM元素以打开/关闭以隐藏元素并节省页面上的空间...我在页面底部有一个网格视图，当我在网格视图上执行操作时，我的页面会重新加载并重置切换。

   // Toggle Dealer Information on/off
    $("#mlldlr").click(function () {
        $("#DealerContainer").toggle();
        $("#ShowHideDI").toggle();
        if ($("#morelessDi").text() === ("...show less"))
            $("#morelessDi").text("...show more");
        else
            $("#morelessDi").text("...show less");

问题是...如果我关闭并出于任何原因重新加载页面，则切换将重置为打开，这意味着显示项目。我希望他们保持关闭，直到我开始重新开放。有什么办法可以做到这一点吗？

默认情况下，

JavaScript 不会在页面重新加载之间存储状态。如果要保留状态，则需要将该信息存储在某个位置。 localStorage可能是正确的解决方案。下面是一个简单的例子，说明 localStorage 如何在重新加载后保持 css 状态： http://jsfiddle.net/kweqaofv/2/

把它放在标签下面。

    <script type="text/javascript">
        $(document).ready(function ()
        {
          $("#DealerContainer").hide();
          $("#ShowHideDI").hide();
        });
    </script>

除了使用 COOKIE 或 The hide();

遵循简单的 1 行代码：

$("element").toggle(100);

#element是您要关闭页面加载切换的元素

只需先插入此行，然后，切换元素，如滑动代唱日志或导航面板！

希望对您有所帮助！

重新加载页面的事实使 DOM 重置为其初始状态，从而重置切换。

我认为可以做到这一点的唯一方法是拥有一个在页面重新加载时不会更改的参数。

我有三个建议：

1-您可以在浏览器中设置具有切换值（开/关）的cookie，当页面加载时，询问此值并设置切换。这可以用jquery完成（点击这个链接了解更多信息，如何使用jQuery设置/取消设置cookie？）：

要设置 Cookie：

$.cookie("test", 1);

要删除它：

$.removeCookie("test");

2-另一种选择是将此参数保存在服务器端。我猜页面是否正在重新加载是因为您正在向服务器发出请求？

如果是这种情况，您可以将切换的状态发送到服务器，执行查询，并在响应时获取切换的状态。在回调函数中，您将设置正确的切换状态。

3-另一种方法是将JFrame用于网格，使网格成为页面中唯一要重新加载的项目。

希望这有帮助

我遇到了类似的问题

，就像

Jquery

   $(document).ready(function() {
   $('nav a').click(function() {
    $('p').toggle('slow');
      });
   });

关于在页面加载时"打开"切换。我对此所做的只是内联文本 html 和 style="display :none;".这会在加载时关闭'p'标签，因此用户可以在此之后随时将其"打开"。

所以那是

.HTML

<nav style="padding-top: 1cm; padding-bottom:1cm;">
        <ul>
          <li style="padding-bottom: .2cm;">
            <a  class="popup"  style="padding-bottom: .2cm;cursor : pointer;"><b>Send</b></a>
          </li>
          <p style ="display: none;">your cat a litter box.
          </p>
        </ul>
 </nav>

请记住，"p"在页面加载时不占用空间。希望我能有所启发。

相关文章：