1
如果您要運行網頁代碼段，並點擊最小化按鈕（ - ），則所有面板都將隱藏。如何使用jQuery修復此切換div？
我想要的是，如果要點擊句柄1中的最小化按鈕，句柄1的內容將只會消失。
$(function(){
\t $('.dragbox')
\t .each(function(){
\t \t $(this).hover(function(){
\t \t \t $(this).find('h2').addClass('collapse');
\t \t }, function(){
\t \t \t $(this).find('h2').removeClass('collapse');
\t \t })
\t \t .find('h2').hover(function(){
\t \t \t $(this).find('.configure').css('visibility', 'visible');
\t \t }, function(){
\t \t \t $(this).find('.configure').css('visibility', 'hidden');
\t \t })
\t \t .end()
\t \t .find('.configure').css('visibility', 'hidden');
\t });
\t $('.column').sortable({
\t \t connectWith: '.column',
\t \t handle: 'h2',
\t \t cursor: 'move',
\t \t placeholder: 'placeholder',
\t \t forcePlaceholderSize: true,
\t \t opacity: 0.4,
\t \t stop: function(event, ui){
\t \t \t $(ui.item).find('h2').click();
\t \t \t var sortorder='';
\t \t \t $('.column').each(function(){
\t \t \t \t var itemorder=$(this).sortable('toArray');
\t \t \t \t var columnId=$(this).attr('id');
\t \t \t \t sortorder+=columnId+'='+itemorder.toString()+'&';
\t \t \t });
\t \t \t alert('SortOrder: '+sortorder);
\t \t \t /*Pass sortorder variable to server using ajax to save state*/
\t \t }
\t })
\t .disableSelection();
});.column{
\t width:49%;
\t margin-right:.5%;
\t min-height:300px;
\t background:#fff;
\t float:left;
}
.column .dragbox{
\t margin:5px 2px 20px;
\t background:#fff;
\t position:relative;
\t border:1px solid #ddd;
\t -moz-border-radius:5px;
\t -webkit-border-radius:5px;
}
.column .dragbox h2{
\t margin:0;
\t font-size:12px;
\t padding:5px;
\t background:#f0f0f0;
\t color:#000;
\t border-bottom:1px solid #eee;
\t font-family:Verdana;
\t cursor:move;
}
.dragbox-content{
\t background:#fff;
\t min-height:100px; margin:5px;
\t font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
\t background: #f0f0f0;
\t border:1px dashed #ddd;
}
.dragbox h2.collapse{
\t background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
\t font-size:11px; font-weight:normal;
\t margin-right:30px; float:right;
}
.minimize{
\t float:right;
\t font-weight: bolder;
\t cursor: pointer;
\t padding: 0 5px;
}
.ui-sortable-handle{
\t min-height: 20px;
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Collapsible Drag & Drop Panels</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Copied from http://webdeveloperplus.com/jquery/collpasible-drag-drop-panels/ -->
<div class="column" id="column1">
\t \t <div class="dragbox" id="item1" >
\t \t \t <h2>Handle 1 <button class="minimize">-</button></h2>
\t \t \t <div class="dragbox-content" >
\t \t \t \t <!-- Panel Content Here -->
\t \t \t </div>
\t \t </div>
\t \t <div class="dragbox" id="item2" >
\t \t \t <h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
\t \t \t <div class="dragbox-content" >
\t \t \t \t <!-- Panel Content Here -->
\t \t \t </div>
\t \t </div>
\t \t <div class="dragbox" id="item3" >
\t \t \t <h2>Handle 3</h2>
\t \t \t <div class="dragbox-content" >
\t \t \t \t <!-- Panel Content Here -->
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="column" id="column2" >
\t \t <div class="dragbox" id="item4" >
\t \t \t <h2>Handle 4</h2>
\t \t \t <div class="dragbox-content" >
\t \t \t \t <!-- Panel Content Here-->
\t \t \t </div>
\t \t </div>
\t \t <div class="dragbox" id="item5" >
\t \t \t <h2>Handle 5</h2>
\t \t \t <div class="dragbox-content" >
\t \t \t \t <!--Panel Content Here-->
\t \t \t </div>
\t \t </div>
\t </div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
<script type="text/javascript">
$(".minimize").click(function(){
$(".minimize").text('+');
$('.dragbox-content').toggle();
});
</script>
</body>
</html>
檢查我的答案是：你只需要改變 $（本）.parent（ ）.closest（ 'dragbox。 '）發現（）切換（）'。dragbox內容。'; –