如何以宽度（以像素为单位）更改时隐藏div

Question

宽度变化时是否可以隐藏div？我知道你可以用bootstrap做到这一点，但我需要以某种方式在没有它的情况下做到这一点。我需要它显示：无增加时它需要显示：阻止它返回到612px

<div id="grid" style="width:612px"></div>

Answer 1

您无法监听宽度更改，而是可以为同一元素添加新的事件侦听器（与kendo-ui事件处理程序不同）并检查宽度。在这种情况下，您可以根据当前宽度显示或隐藏元素。

Answer 2

你想写一些检查宽度并根据宽度显示/隐藏它的东西：

function checkGridWidth() {
    var gridWidth = $('#grid').width();
    if(gridWidth == 612){
        $('#grid').show();
    }else{
        $('#grid').hide();
    }
};

您可能想要检查文档准备好的宽度以及某些事件发生的时间，例如窗口宽度调整大小或者可能是点击？不确定什么会影响宽度：

$(document).ready(function() {
    checkGridWidth();
});

$( window ).resize(function() {
  checkGridWidth();
});

$('#someElement').click(function() {
  checkGridWidth();
});

修改 基于OP的注释，需要一个事件处理程序，它允许在扩展另一个元素时折叠#grid ...

请参阅：http://demos.telerik.com/kendo-ui/splitter/api
并且：http://demos.telerik.com/kendo-ui/splitter/events

$(document).ready(function() {

                function collapseOtherSplitter() {
                    splitter.size(indexOfPane, 0);// where indexOfPane is the index of the pane you want to collapse
                }

                function onExpand(e) {
                    collapseOtherSplitter();
                }

                // One of your top, horizontal splitters that you want to collapse when the vertical splitter expands:
                var splitter = $("#horiz-splitter").kendoSplitter({
                    orientation: "horizontal",
                    panes: [
                        { collapsible: true, size: "50%" },
                    ],
                });


                // Your bottom, vertical splitter
                $("#vertical-splitter").kendoSplitter({
                    orientation: "vertical",
                    panes: [
                        { collapsible: true, size: "100px" },
                    ],
                    expand: onExpand,
                });
            });