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

Greetings I have the following javascript controlling some DOM elements on my page to toggle on/off to hide the elements and save real estate on the page ... I have a gridview at the bottom of the page, and when I perform operations on the gridView, my page reloads and the toggle is reset.

问候我有以下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");

The problem is ... if I toggle off and I reload the page for whatever reason, the toggle is reset to on, meaning the items show. I want them to remain closed until I initiate their reopening. Is there any way to do this?

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

4 个解决方案

#1

JavaScript doesn't store state between page reloads by default. If you want to persist the state, you'll need to store that information some where. localStorage might be the right solution. Here's a simple example of how localStorage can keep a css state after reloading: http://jsfiddle.net/kweqaofv/2/

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

#2

Put this below the tag.

把它放在标签下面。

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

#3

The fact that the page is reloaded is making the DOM to reset to its initial state, thus resetting the toggle.

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

The only way I think this can be done is to have a parameter that would not be changed on page reload.

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

I have three suggestions:

我有三个建议:

1- You can set a cookie in your browser with the value of the toggle (on/off) and when the page loads, ask for this value and set the toggle. This can be done with jquery (follow this link for more info How do I set/unset cookie with jQuery?):

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

To set a cookie:

要设置cookie:

$.cookie("test", 1);

To delete it:

要删除它:

$.removeCookie("test");

2- The other option is to save this parameter on the server side. I'm guessing that if the page is reloading is because you are making a request to the server?

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

If this is the case, you could send the state of the toggle to the server, do your query, and on the response get the state of the toggle back. In the callback function you would then set the proper toggle state.

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

3- Another way could be using a JFrame for the grid, making the grid the only item of the page to reload.

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

Hope this helps

希望这可以帮助

#4

I had a similar problem with one that is as simple as

我遇到了类似的问题

Jquery

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

with regards to toggle being switched "on" upon page load. All I did on this on was inline text the html with style="display :none;".This switches off the 'p' tag upon load and thus the user can switch it "on" any time after that.

关于在页面加载时切换“打开”的问题。我所做的就是内联文本html with style =“display:none;”。这会在加载时关闭'p'标记,因此用户可以在此之后的任何时间“打开”它。

So that is

就是这样

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>

Bear in mind that the 'p' takes no space upon page load. Hope I shed some light.

请记住,'p'在页面加载时不占用空间。希望我能说清楚一点。

#1

#2