javascript - Jquery 单独切换在 Firefox 中无法正常工作

Question

我有以下代码，可以展开和隐藏展开和折叠时的所有内容。我面临的问题是个别项目没有正确关闭。它们应该在 FF 和 IE 中正常工作。

问题是当所有内容都展开并且您单独关闭一个时..即使您没有单击第二个，它也会关闭第二个。有一些不稳定。每次展开后尝试关闭最后一项或倒数第二项几次，您将关闭第二个随机项目或其旁边的一项

这种情况并不总是发生。这个问题在 Firefox 中很明显

我非常感谢您的帮助。

这是下面的代码以及 fiddle 和屏幕抓取

JSFIDDLE

Javascript

    var prevId;
    function showDiv(id) {
        var infoDiv = "#" + id + "-moreinfo";
        var plusDiv = "#" + id + "-plus";
        var minusDiv = "#" + id + "-minus";

        if($(infoDiv).is(":visible")){
            removeHash();
            $(plusDiv).show();
            $(minusDiv).hide();
            $(infoDiv).slideUp(200);
        }else{
            window.location.hash = id;
            $(minusDiv).show();
            $(plusDiv).hide();
            $(infoDiv).slideDown(250);
        }
        if(prevId != undefined){
            if(prevId.valueOf() != id.valueOf()){
                $("#" + prevId + "-moreinfo").slideUp(200);
                $("#" + prevId + "-plus").show();
                $("#" + prevId + "-minus").hide();  
            }   
        }
        prevId = id;
    }

    /***
     *  removeHash()
     *  Initiates an HTML5 feature to clean URL hashes.
     *  Requires HTML5 Standards or IE10 or higher. Safe fallback for older browsers.
     **/
    function removeHash(e){ 
        /* pushState adds to the browser history, or replaceState which keeps the history uniformly clean */
        if (history.replaceState){
            /* HTML5 browsers, including IE10+ */
            history.replaceState("", document.title, window.location.pathname + window.location.search);
        } else {
            /* Other browsers */
            window.location.hash = '';
            return false;

        }
    }

        /***
     *  isNumber(value)
     *  Boolean function checking if value is numerical.
     **/
    function isNumber(n){
        return !isNaN(parseFloat(n)) && isFinite(n);
    }



/***
*   Manupulates CSS to show  css butons on expand and close. Also, expands and closes all violations


**/


    $(document).ready(function(){

        if (window.location.hash) {
            /* Clean the hash, stripping out the preceding symbol, as showDiv() needs numbers */
            var clean_hash = window.location.hash.replace('#','');
            var text = $(this).text();
            console.log("text "  +text);
            console.log("clean_hash "  +clean_hash);
            console.log("text " );
            /* Check if the hash is a number before attempting to expand */
            if (isNumber(clean_hash)) {
                showDiv(clean_hash);
                /* tiny wait before scrolling */
                window.setTimeout(function() {
                    /* Uses jquery.scrollto library: http://balupton.github.io/jquery-scrollto/ */
                    //Scroll down to the item's h3 violation header text.
                    $('#post-'+prevId+' h3.viol-header').ScrollTo({
                        duration: 350,
                        easing: 'linear',
                    });
                }, 800);
            }
        }



         /**
          **   This shows the content when  the user clicks on Expand all and also switches the plus and minus
          **/
           $("#Hide").hide();
           $("#Show").click(function(e){
                 removeHash(e); //Reset the hash
                $("div.moreinfo").slideDown(200);
                $("div.plus").hide().removeClass("closed");;
                $("div.minus").show().addClass("opened");
                $("#Show").html("Expand All").addClass("expanded");     
                $("#Show").hide();
                $("#Hide").show();
                e.preventDefault();              
            });

         /**
          **   This code hides the ontent when  the user clicks on Expand all and also switches the plus and minus
          **/
            $("#Hide").click(function(e){
                removeHash(e);  //Reset the hash
                $("div.moreinfo").slideUp(200);
                $("div.plus").show().addClass("closed");    ;
                $("div.minus").hide().removeClass("opened");    
                $(".message").html("Collapse All");  
                $("#Show").show();
                $("#Hide").hide();

                e.preventDefault();          
           });


    });

Answer 1

看起来它保留了单击“全部显示”/“全部展开”之前的先前 prevId。单击“全部显示”/“全部展开”按钮时，您需要将该 prevId 重置为 undefined。

我将此行添加到您的 $("#Show") 和 $("#Hide") 点击函数的顶部，它似乎正在工作。

 prevId = undefined;

http://jsfiddle.net/rtxmpq8h/54/

重现此问题的步骤:

全部展开 > 折叠 1 Div > 全部折叠 > 全部展开。然后折叠不同的 div。它应该折叠该 div 和您折叠的第一个 div。我可以在任何浏览器中重新创建它。