2015-05-19 110 views
3

我有下面的代碼展開和隱藏所有內容展開和摺疊。我面臨的問題是個別項目沒有正確關閉。他們應該在FF和IE中正常工作。Jquery單獨切換在Firefox中無法正常工作

問題是當所有人都展開,你關閉一個人..它關閉第二個,即使你沒有點擊第二個。有一些不穩定性。試着在每次展開後關閉最後一個或第二個最後一個,然後關閉第二個隨機項或旁邊的第二個項。

它並不總是發生。在Firefox中的問題是顯而易見的

我真的很感謝你的幫助。

這裏是下面的代碼和小提琴和屏幕抓取

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


    }); 

enter image description here

+0

似乎工作正常,如果你加載你的代碼在正確的地方http://jsfiddle.net/rtxmpq8h/47/ – j08691

+0

我面臨的問題是,如果你注意到當你擴展所有。並嘗試單獨關閉它們。有時其他人也關閉。如何改正cna? – user244394

+0

我在Chrome中看不到這種行爲。 – j08691

回答

0

它看起來像它保留來自前戲之前的所有prevId /展開全部被點擊。當單擊Show All/Expand All按鈕時,您需要將prevId重置爲undefined

我將此行添加到您的$("#Show")$("#Hide")點擊功能的頂部,它似乎正在工作。

prevId = undefined; 

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

步驟重新創建此問題:

展開全部>收起1 DIV>全部摺疊>全部展開。然後摺疊一個不同的div。它應該摺疊該div和您摺疊的第一個div。我可以在任何瀏覽器中重新創建。

+0

謝謝。似乎已修復了Firefox問題 – user244394

+0

不客氣。請記住,我可以在任何瀏覽器中重新創建此問題。使用「重新創建步驟」查看最新編輯。 –

相關問題