Javascript 可调整大小的div不是'；不管我做什么，我都不工作_Javascript_Jquery_Html

Javascript 可调整大小的div不是'；不管我做什么，我都不工作

javascript jquery html

Javascript 可调整大小的div不是'；不管我做什么，我都不工作,javascript,jquery,html,Javascript,Jquery,Html,我一直在尝试使用JqueryUIs Resizeable来创建可调整大小的div，例如在JSFIDLE上。JSFIDLE利用JqueryUI可调整大小的句柄，以便您可以扩展代码编辑器或显示dhtml结果的输出区域（设计等）。我已经尝试过为其他在使用jQueryUI的resizble时遇到问题的人提供的所有解决方案。有没有一种方法可以只使用CSS创建一个可调整大小的div并具有一个自定义句柄？我也试过这个，它也不起作用，但它正是我想要的；两个div，一个包含主要内容，另一个包含边栏内容。我很快对这

我一直在尝试使用JqueryUIs Resizeable来创建可调整大小的div，例如在JSFIDLE上。JSFIDLE利用JqueryUI可调整大小的句柄，以便您可以扩展代码编辑器或显示dhtml结果的输出区域（设计等）。我已经尝试过为其他在使用jQueryUI的resizble时遇到问题的人提供的所有解决方案。有没有一种方法可以只使用CSS创建一个可调整大小的div并具有一个自定义句柄？我也试过这个，它也不起作用，但它正是我想要的；两个div，一个包含主要内容，另一个包含边栏内容。我很快对这里给出的解决方案进行了修改：如果有人能告诉我我做错了什么，或者为我试图做的事情提供另一种解决方案，我将不胜感激

下面是代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #sidebar {
                width: 49%;
            }
            #content {
                width: 49%;
                float: left;
            }
        </style>

        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-    ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $( "#sidebar" ).resizable({      
                });
                $("#sidebar").bind("resize", function (event, ui) {
                    var setWidth = $("#sidebar").width();
                    $('#content').width(1224-setWidth);
                    $('.menu').width(setWidth-6);
                });
            });
        </script>
    </head>
    <div id="sidebar"> 
        <div class="sidebar-menu">
            <!-- all your sidebar/navigational items go here -->
        </div>
    </div>
    <div id="content">
        <!-- all your main content goes here -->
    </div>


#边栏{
宽度：49%；
}
#内容{
宽度：49%；
浮动：左；
}
$（文档）.ready（函数（）{
$（“#侧栏”）。可调整大小（{
});
$（“#边栏”）.bind（“resize”，函数（事件，用户界面）{
var setWidth=$（“#边栏”）.width（）；
$（#content'）。宽度（1224 setWidth）；
$（'.menu'）.width（setWidth-6）；
});
});

应该是

$('#content').width(1224-setWidth);
$('.menu').width(setWidth-6);

问题在于您尚未关闭的报价。对于

菜单

类和

内容

$(document).ready(function() {
    $( "#sidebar" ).resizable({      
    });
    $("#sidebar ").bind("resize", function (event, ui) {
        var setWidth = $("#sidebar").width();
        $('#content').width(1224-setWidth);
        $('.sidebar-menu').width(setWidth-6);
    });
});

你的问题自相矛盾。首先，您询问我们是否可以仅使用CSS创建一个可调整大小的小部件，然后向我们展示使用jQueryUI的可调整大小插件的代码。请用你的例子做一个JSFIDLE。我确实用我的例子做了一个JSFIDLE。请再读一遍。谢谢你指出这一点，但我仍然有困难。请查看您在JSFIDLE上发布的html代码中没有菜单类的FIDLE。我已经更新了JSFIDLE并关闭了引号，但它仍然不起作用，因此我还没有收到好的答案。我已经将答案编辑为include.sidebar menu。希望这就是您所指的。menuI尝试添加。侧边栏菜单，但仍然没有运气：（可能是什么问题？

$(document).ready(function() {
    $( "#sidebar" ).resizable({      
    });
    $("#sidebar ").bind("resize", function (event, ui) {
        var setWidth = $("#sidebar").width();
        $('#content').width(1224-setWidth);
        $('.sidebar-menu').width(setWidth-6);
    });
});