手動切換DIV後，響應代碼停止工作

我有兩個div。我希望左邊的div根據窗口大小自動隱藏和顯示，即我希望它能夠響應。手動切換DIV後，響應代碼停止工作

另一方面，如果需要，我想手動隱藏/顯示左邊的div。我在中間加了一個黑色的分隔符。當點擊分隔符時，左側div隱藏，右側div則佔據整個寬度。

到目前爲止，一切都很好。

但是。當我手動隱藏/顯示左側div時，停止對響應代碼作出反應。

請檢查這個JSFiddle，借給我一些幫助。

非常感謝。

<html> 

    <head> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

     <style> 
      .div1 { 
       background-color: #ffee99; 
       width: 300px; 
       height: 100%; 
       position: absolute; 
       top: 0px; 
       left: 0px; 
      } 

      .separator { 
       border-left: 3px solid #000000; 
       border-right: 3px solid #000000; 
       width: 0px; 
       height: 100%; 
       position: absolute; 
       top: 0px; 
       left: 300px; 
       z-index: 100; 
      } 

      .div2 { 
       background-color: #99eeff; 
       width: calc(100% - 300px); 
       height: 100%; 
       position: absolute; 
       top: 0px; 
       left: 300px; 
      } 

      @media screen and (max-width: 500px) { 

       .div { 
        display: none; 
       } 

       .separator { 
        left: 0px; 
       } 

       .div2 { 
        width: 100%; 
        left: 0; 
       } 

      } 

     </style> 

     <script> 

      $(function() { 

       function hideLeftDiv() { 
        $('.div1').hide(); 
        $('.div2').css('width', '100%').css('left', 0); 
        $('.separator').css('left', '0px'); 
       } 

       function showLeftDiv() { 
        $('.div1').show(); 
        $('.div2').css('width', 'calc(100% - 300px)').css('left', '300px'); 
        $('.separator').css('left', '300px'); 
       } 

       $('.separator').click(function() { 
        $('.div1').is(":visible") ? hideLeftDiv() : showLeftDiv(); 
       }); 

      }); 

     </script> 

    </head> 

    <body> 
     <div class="div1"></div> 
     <div class="separator"></div> 
     <div class="div2"></div> 
    </body> 

</html>

來源

2014-10-29 joaorodr84

爲什麼你不使用引導？ – Refilon 2014-10-29 10:25:03

因爲我不知道我可以使用bootstrap。你能告訴我怎麼樣？非常感謝。 :) – joaorodr84 2014-10-29 10:42:15

閱讀：getbootstrap.com/css/#grid您可以使用網格系統做一個頁面像你這樣，但是當屏幕越來越小，你可以使用getbootstrap.com/css/#responsive-utilities此鏈接，知道什麼時候隱藏的東西。

因此，爲了幫助您也許在正確的方向邁出的一步：

<div class="container"> 
    <div class="col-sm-4 hidden-xs"> 
     This is the left div. 
    </div> 
    <div class="col-sm-8 col-sm-12"> 
     This is the left div. 
    </div> 
</div>

這樣的事情應該工作。看看這個小提琴：Fiddle with bootstrap

你可以調整任何你想要的風格的類。

來源

2014-10-29 10:54:20 Refilon

有兩個類別用於識別是否隱藏某個東西，即桌面和移動。然後你可以檢查它是否實際隱藏着is(':hidden')並作出相應的反應。

檢查此小提琴快速演示http://fiddle.jshell.net/tmx3p6ts/31/

來源

2014-10-29 12:06:38

謝謝@andyw。你的解決方案非常好，但它仍然有一個錯誤。 --- 1）從一個小窗口開始。 --- 2）通過在分隔符上單擊兩次打開並關閉左側div。 --- 3）將窗口拉伸到PC寬度，注意左邊的div不會自動打開。 – joaorodr84 2014-11-18 14:24:33

手動切換DIV後，響應代碼停止工作

回答

相關問題