jquery div拉動大小是一種非常實用的功能，在網頁設計中經常用到。利用jquery div拉動大小，可以讓不同的元素動態(tài)地調整大小和位置，從而實現(xiàn)更靈活的頁面布局。下面是一個使用jquery div拉動大小的例子：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#container {
width: 400px;
height: 400px;
border: 1px solid black;
}
#left {
width: 50%;
height: 100%;
float: left;
border-right: 1px solid black;
resize: horizontal;
overflow: auto;
}
#right {
width: 50%;
height: 100%;
float: left;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod vel tellus sed consectetur. Proin imperdiet augue at felis pulvinar eget viverra diam posuere. Vivamus neque enim, euismod sit amet libero sit amet, hendrerit viverra magna. Maecenas vel erat luctus, luctus eros et, laoreet risus. Sed auctor commodo orci, vel consectetur turpis eleifend commodo. Donec eget tellus faucibus, varius nulla sed, commodo enim.
</div>
<div id="right">
Integer eget ex elit. Maecenas pulvinar commodo nisi, vitae elementum orci lacinia eget. Nam viverra ipsum sed dui facilisis, in iaculis massa tincidunt. In vestibulum dolor eu lorem feugiat, id dapibus ante feugiat. Nulla tristique, arcu ut scelerisque finibus, enim turpis bibendum tellus, sit amet consequat metus nisi nec diam.
</div>
</div>
<script>
$(document).ready(function() {
$("#left").resizable({ handles: "e" });
$("#right").resizable({ handles: "w" });
});
</script>
</body>
</html>在這個例子中，我們創(chuàng)建了一個
容器元素，里面包含了兩個
子元素，左邊的是
，右邊的是
。這兩個子元素都可以水平拉動大小，因為它們分別使用了resize: horizontal;屬性。另外，我們使用了jquery resizable()函數(shù)來實現(xiàn)拉動大小的功能。
上一篇二級菜單隱藏css