Question

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

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

它不会一直发生。这个问题在firefox中很明显

我真的很感谢你的帮助。

以下是代码和小提琴和屏幕抓取

的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();          
           });


    });

enter image description here

Answer 1

在点击Show All / Expand all之前，它似乎保留了之前的prevId。单击全部显示/全部展开按钮时，您需要将prevId重置为undefined。

我已将此行添加到$("#Show")和$("#Hide")点击功能的顶部，但它似乎正常运行。

 prevId = undefined;

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

重新创建此问题的步骤：

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

Jquery个人切换在Firefox

1 个答案: