Question

我想创建一个简单的切换功能，用一个cookie来切换div show（）或hide（），以记住div的状态。到现在为止还挺好。嗯，它有点工作。当我切换div hide（）它隐藏，但当我重新加载页面时想要切换div show（）我必须单击按钮两次！我已经阅读了这里的答案，但他们没有帮助。此外，我试图使用点击功能，但这根本不起作用。

这是代码：

  jQuery().ready(function () {

        var footeroff = jQuery.cookie('footeroff'); 
        var toggle_footer = jQuery(".toggle_footer_switch");

        if (footeroff == "off") {
        jQuery("div#footer").hide();
        jQuery("div#wkfooter_switch").hide();
        toggle_footer.html("<img src='../images/other/zuklappen.png' border='0'>");
        };

        if (footeroff == "on") {
        jQuery("div#footer").show();
        jQuery("div#wkfooter_switch").show();
        toggle_footer.html("<img src='../images/other/aufklappen.png' border='0'>");
        };

        var footer_switch = jQuery("div#footer");
        var toggle_footer = jQuery(".toggle_footer_switch");
        var toggle_switch_div = jQuery("div#toggle_switch_div");

        jQuery("a.toggle_footer_switch").toggle(
            function () {
                toggle_footer.html("<img src='../images/other/zuklappen.png' border='0'>");
                jQuery("div#footer").fadeOut("slow");
                jQuery("div#wkfooter_switch").hide();
                jQuery.cookie("footeroff" , "off");
            },
            function () {
                toggle_footer.html("<img src='../images/other/aufklappen.png' border='0'>");
                jQuery("div#footer").fadeIn("slow");
                jQuery("div#wkfooter_switch").show();
                jQuery.cookie("footeroff" , "on");
            }   
        );


    });

还有带点击功能的代码：

      jQuery().ready(function () {

        var footeroff = jQuery.cookie('footeroff'); 
        var toggle_footer = jQuery(".toggle_footer_switch");

        if (footeroff == "off") {
        jQuery("div#footer").hide();
        jQuery("div#wkfooter_switch").hide();
        toggle_footer.html("<img src='../images/other/zuklappen.png' border='0'>");
        };

        if (footeroff == "on") {
        jQuery("div#footer").show();
        jQuery("div#wkfooter_switch").show();
        toggle_footer.html("<img src='../images/other/aufklappen.png' border='0'>");
        };

        var footer_switch = jQuery("div#footer");
        var toggle_footer = jQuery(".toggle_footer_switch");
        var toggle_switch_div = jQuery("div#toggle_switch_div");


        jQuery("a.toggle_footer_switch").click(function() {

            if (footer_switch.is(":visible")) {
                toggle_footer.html("<img src='../images/other/zuklappen.png' border='0'>");
                jQuery("div#footer").hide();
                jQuery("div#wkfooter_switch").hide();
                jQuery.cookie("footeroff" , "off");
            }
            else if (footer_switch.is(":hidden")) {
                toggle_footer.html("<img src='../images/other/aufklappen.png' border='0'>");
                jQuery("div#footer").show();
                jQuery("div#wkfooter_switch").show();
                jQuery.cookie("footeroff" , "on");
            }

        });


    });

非常感谢！

祝你好运

Answer 1

以下是否有效？

jQuery().ready(function () {

    var footeroff = jQuery.cookie('footeroff'); 
    var toggle_footer = jQuery(".toggle_footer_switch");

    toggle_footer.toggle(
        function () {
            toggle_footer.html("<img src='../images/other/zuklappen.png' border='0'>");
            jQuery("div#footer").fadeOut("slow");
            jQuery("div#wkfooter_switch").hide();
            jQuery.cookie("footeroff" , "off");
        },
        function () {
            toggle_footer.html("<img src='../images/other/aufklappen.png' border='0'>");
            jQuery("div#footer").fadeIn("slow");
            jQuery("div#wkfooter_switch").show();
            jQuery.cookie("footeroff" , "on");
        }   
    );
    // since the page starts off with the div shown, so let's hide it.
    // note that this will do the slow fade - you may want to check for this inside the toggle function and just do an instant hide() instead
    if (footeroff == "off") {
        toggle_footer.toggle();
    };
});

Answer 2

我知道这是一个非常古老的问题，但对于那些正在寻找快速解决方案的人来说，这对我有用：

一个。在PHP / HTML文件中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/.../jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#pClick").click(function(){          
            $("#pText").toggle();
            $("#pText").text("...");
        });
    });
    </script>

湾在CSS文件中：

#pText {display: none;}

现在即使在第一次点击也能正常工作。这是一个简单，快速的答案，我希望对某些人有用。

jQuery切换功能在第一次单击时不起作用

2 个答案: