如何使用jQuery使特定的線或邊框或div可調整大小

Question

嗨，我想讓我的div resizable ，如下圖所示

如上圖所示，我想調整div大小，這沒有發生

codepen： https ：//codepen.io/anon/pen/bQGYmR

 $(function() { $('.band').resizable(); $('#wrapper').resizable(); }); 

 #wrapper { padding-left: 0; transition: all 0.5s ease; height: 100%; } #sidebar-wrapper { z-index: 1000; position: fixed; top: 0; left: 0; width: 210px; height: calc(35vh - 6px); /* As you give a border of 3px */ overflow-y: auto; background: rgba(0,0,0,0.9); transition: all 0.5s ease; border: 3px solid red; color:white; } .stories-preview-wrapper{ position: fixed; height: calc(65vh - 6px); /* As you give a border of 3px */ bottom: 0; left: 0; border: 3px solid green; width: 210px; } .band{ position: relative; border-top: 1px dotted red; padding: 0px; margin: 0px; height: 2px !important; text-align: center; } 

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div id="wrapper" class="toggled hidden-xs"> <!-- Sidebar --> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li>hello world</li> <li>hello world</li> </ul> <div class="band"> <p><span>Heading</span></p> </div> </div> <div class="stories-preview-wrapper"> <ul class="sidebar-nav"> <li>hello world 2</li> <li>hello world 2</li> </ul> </div> </div> 

Answer 1

有關其他一些提示，請參見此更新的Codepen 。

首先，您需要將jquery-ui.css添加到您的代碼中： https : jquery-ui.css

第二點：不要使band可調整大小，因為它只是定界元素。 而是在調整大小之前使元素（在本例中為sidebar-nav ）。 為sidebar-nav創建包裝，並調用$('.sidebar-nav-wrapper').resizable();

<div id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <li>hello world</li>
    <li>hello world</li>
  </ul>
  <div class="band"><p><span>Heading</span></p></div>
</div>

第三點：從屏幕截圖中不清楚要調整大小的元素。 但是$('#sidebar-wrapper').resizable(); 如果刪除overflow-y: auto;似乎可以正常工作overflow-y: auto; 從CSS。

我認為在這個例子中還有很多工作要做，我只是指出了一些可以幫助您入門的事情。