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

时间:2015-01-29 20:55:54

标签: javascript jquery asp.net

问候我有以下javascript控制我页面上的一些DOM元素来打开/关闭以隐藏元素并在页面上保存不动产... 我在页面底部有一个gridview,当我在gridView上执行操作时,我的页面重新加载并重置切换。

   // 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");

问题是......如果我关闭并因任何原因重新加载页面,切换将重置为开启,意味着项目显示。我希望他们保持关闭,直到我重新开始。有没有办法做到这一点?

5 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

除了使用COOKIE或hide();

遵循简单的1行代码:

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

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

只需首先插入此行,然后, 切换元素,例如滑动的dailog或 导航面板!

希望有帮助!

答案 2 :(得分:0)

将它放在标签下面。

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

答案 3 :(得分:0)

页面重新加载的事实是让DOM重置为初始状态,从而重置切换。

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

我有三个建议:

1-您可以在浏览器中设置一个cookie,其中包含切换的值(开/关),当页面加载时,请求此值并设置切换。这可以通过jquery完成(点击此链接获取更多信息How do I set/unset cookie with jQuery?):

设置Cookie:

$.cookie("test", 1);

删除它:

$.removeCookie("test");

2-另一个选项是在服务器端保存此参数。我猜测如果页面正在重新加载是因为你向服务器发出了请求?

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

3-另一种方法是使用JFrame作为网格,使网格成为重新加载页面的唯一项目。

希望这有帮助

答案 4 :(得分:0)

我遇到的问题与

一样简单

<强> Jquery的

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

关于切换切换&#34; on&#34;在页面加载。 我在此处所做的就是使用style="display :none;"将html内联文本。这会在加载时关闭'p'标记,因此用户可以在&#34; on&#34;之后的任何时间。

这就是

<强> 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>

请记住&#39; p&#39;在页面加载时不占用空间。 希望我能说清楚。