Question

我有两个div。我希望左侧div根据窗口大小自动隐藏和显示，即我希望它能够响应。

另一方面，我想在必要时手动隐藏/显示左div。我在中间添加了一个黑色分隔符。单击分隔符时，左侧div隐藏，右侧div占据整个宽度。

到现在为止，一切都还好。

BUT。当我手动隐藏/显示左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>

Answer 1

玩两个类来识别某些东西是否隐藏，即桌面和移动。然后，您可以检查它是否实际隐藏了is(':hidden')并做出相应的响应。

请检查此小提琴，以获得快速演示http://fiddle.jshell.net/tmx3p6ts/31/

Answer 2

阅读本文：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

您可以将类调整为您想要的任何样式。

手动切换DIV后，响应代码停止工作

2 个答案: