手动切换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后，响应代码停止工作

回答

相关问题