如何使用 jQuery 修复此切换 div？

Question

如果您运行网页片段，并单击最小化按钮 ( - )，所有面板都将隐藏。

我希望如果我要单击句柄 1 的最小化按钮，句柄 1 的内容只会消失。

$(function(){
 $('.dragbox')
 .each(function(){
  $(this).hover(function(){
   $(this).find('h2').addClass('collapse');
  }, function(){
   $(this).find('h2').removeClass('collapse');
  })
  .find('h2').hover(function(){
   $(this).find('.configure').css('visibility', 'visible');
  }, function(){
   $(this).find('.configure').css('visibility', 'hidden');
  })

  .end()
  .find('.configure').css('visibility', 'hidden');
 });
 $('.column').sortable({
  connectWith: '.column',
  handle: 'h2',
  cursor: 'move',
  placeholder: 'placeholder',
  forcePlaceholderSize: true,
  opacity: 0.4,
  stop: function(event, ui){
   $(ui.item).find('h2').click();
   var sortorder='';
   $('.column').each(function(){
    var itemorder=$(this).sortable('toArray');
    var columnId=$(this).attr('id');
    sortorder+=columnId+'='+itemorder.toString()+'&';
   });
   alert('SortOrder: '+sortorder);
   /*Pass sortorder variable to server using ajax to save state*/
  }
 })
 .disableSelection();
});

.column{
 width:49%;
 margin-right:.5%;
 min-height:300px;
 background:#fff;
 float:left;
}
.column .dragbox{
 margin:5px 2px  20px;
 background:#fff;
 position:relative;
 border:1px solid #ddd;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
}
.column .dragbox h2{
 margin:0;
 font-size:12px;
 padding:5px;
 background:#f0f0f0;
 color:#000;
 border-bottom:1px solid #eee;
 font-family:Verdana;
 cursor:move;
}
.dragbox-content{
 background:#fff;
 min-height:100px; margin:5px;
 font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
 background: #f0f0f0;
 border:1px dashed #ddd;
}
.dragbox h2.collapse{
 background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
 font-size:11px; font-weight:normal;
 margin-right:30px; float:right;
}

.minimize{
 float:right;
 font-weight: bolder;
 cursor: pointer;
 padding: 0 5px;
}

.ui-sortable-handle{
 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">
  <div class="dragbox" id="item1" >
   <h2>Handle 1 <button class="minimize">-</button></h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here -->
   </div>
  </div>
  <div class="dragbox" id="item2" >
   <h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here -->
   </div>
  </div>
  <div class="dragbox" id="item3" >
   <h2>Handle 3</h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here -->
   </div>
  </div>
 </div>
 <div class="column" id="column2" >
  <div class="dragbox" id="item4" >
   <h2>Handle 4</h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here-->
   </div>
  </div>
  <div class="dragbox" id="item5" >
   <h2>Handle 5</h2>
   <div class="dragbox-content" >
    <!--Panel Content Here-->
   </div>
  </div>
 </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>

Answer 1

$(function(){
 $('.dragbox')
 .each(function(){
  $(this).hover(function(){
   $(this).find('h2').addClass('collapse');
  }, function(){
   $(this).find('h2').removeClass('collapse');
  })
  .find('h2').hover(function(){
   $(this).find('.configure').css('visibility', 'visible');
  }, function(){
   $(this).find('.configure').css('visibility', 'hidden');
  })

  .end()
  .find('.configure').css('visibility', 'hidden');
 });
 $('.column').sortable({
  connectWith: '.column',
  handle: 'h2',
  cursor: 'move',
  placeholder: 'placeholder',
  forcePlaceholderSize: true,
  opacity: 0.4,
  stop: function(event, ui){
   $(ui.item).find('h2').click();
   var sortorder='';
   $('.column').each(function(){
    var itemorder=$(this).sortable('toArray');
    var columnId=$(this).attr('id');
    sortorder+=columnId+'='+itemorder.toString()+'&';
   });
   alert('SortOrder: '+sortorder);
   /*Pass sortorder variable to server using ajax to save state*/
  }
 })
 .disableSelection();
});

.column{
 width:49%;
 margin-right:.5%;
 min-height:300px;
 background:#fff;
 float:left;
}
.column .dragbox{
 margin:5px 2px  20px;
 background:#fff;
 position:relative;
 border:1px solid #ddd;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
}
.column .dragbox h2{
 margin:0;
 font-size:12px;
 padding:5px;
 background:#f0f0f0;
 color:#000;
 border-bottom:1px solid #eee;
 font-family:Verdana;
 cursor:move;
}
.dragbox-content{
 background:#fff;
 min-height:100px; margin:5px;
 font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
 background: #f0f0f0;
 border:1px dashed #ddd;
}
.dragbox h2.collapse{
 background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
 font-size:11px; font-weight:normal;
 margin-right:30px; float:right;
}

.minimize{
 float:right;
 font-weight: bolder;
 cursor: pointer;
 padding: 0 5px;
}

.ui-sortable-handle{
 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">
  <div class="dragbox" id="item1" >
   <h2>Handle 1 <button class="minimize">-</button></h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here -->
   </div>
  </div>
  <div class="dragbox" id="item2" >
   <h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here -->
   </div>
  </div>
  <div class="dragbox" id="item3" >
   <h2>Handle 3</h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here -->
   </div>
  </div>
 </div>
 <div class="column" id="column2" >
  <div class="dragbox" id="item4" >
   <h2>Handle 4</h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here-->
   </div>
  </div>
  <div class="dragbox" id="item5" >
   <h2>Handle 5</h2>
   <div class="dragbox-content" >
    <!--Panel Content Here-->
   </div>
  </div>
 </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('+');
       $(this).parent().closest('.dragbox').find('.dragbox-content').toggle();
    });
    </script>



</body>
</html>

Answer 2

尝试定位被点击的项目：

$(".minimize").click(function(){
  $(this).text('+');
  $(this).parents('.dragbox-content').first().toggle();
});

Answer 3

您可以获得点击的 link 的最近父级 (dragbox) (minimize)，然后仅在该父级中找到 dragbox-content。

$(".minimize").click(function() {
   $(this).text('+');
   $(this).closest('.dragbox').find('.dragbox-content').toggle();
});

Answer 4

.next() 将帮助您 toggle 在您点击的 element 上的下一个 div

$(function(){
 $('.dragbox')
 .each(function(){
  $(this).hover(function(){
   $(this).find('h2').addClass('collapse');
  }, function(){
   $(this).find('h2').removeClass('collapse');
  })
  .find('h2').hover(function(){
   $(this).find('.configure').css('visibility', 'visible');
  }, function(){
   $(this).find('.configure').css('visibility', 'hidden');
  })

  .end()
  .find('.configure').css('visibility', 'hidden');
 });
 $('.column').sortable({
  connectWith: '.column',
  handle: 'h2',
  cursor: 'move',
  placeholder: 'placeholder',
  forcePlaceholderSize: true,
  opacity: 0.4,
  stop: function(event, ui){
   $(ui.item).find('h2').click();
   var sortorder='';
   $('.column').each(function(){
    var itemorder=$(this).sortable('toArray');
    var columnId=$(this).attr('id');
    sortorder+=columnId+'='+itemorder.toString()+'&';
   });
   alert('SortOrder: '+sortorder);
   /*Pass sortorder variable to server using ajax to save state*/
  }
 })
 .disableSelection();
});
$('.dragbox h2').click(function(){
  $(this).next('.dragbox-content').toggle();
});

.column{
 width:49%;
 margin-right:.5%;
 min-height:300px;
 background:#fff;
 float:left;
}
.column .dragbox{
 margin:5px 2px  20px;
 background:#fff;
 position:relative;
 border:1px solid #ddd;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
}
.column .dragbox h2{
 margin:0;
 font-size:12px;
 padding:5px;
 background:#f0f0f0;
 color:#000;
 border-bottom:1px solid #eee;
 font-family:Verdana;
 cursor:move;
}
.dragbox-content{
 background:#fff;
 min-height:100px; margin:5px;
 font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
 background: #f0f0f0;
 border:1px dashed #ddd;
}
.dragbox h2.collapse{
 background:#f0f0f0 url('collapse.png') no-repeat top right;
}
.dragbox h2 .configure{
 font-size:11px; font-weight:normal;
 margin-right:30px; float:right;
}

.minimize{
 float:right;
 font-weight: bolder;
 cursor: pointer;
 padding: 0 5px;
}

.ui-sortable-handle{
 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">
  <div class="dragbox" id="item1" >
   <h2>Handle 1 <button class="minimize">-</button></h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here -->
   </div>
  </div>
  <div class="dragbox" id="item2" >
   <h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here -->
   </div>
  </div>
  <div class="dragbox" id="item3" >
   <h2>Handle 3</h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here -->
   </div>
  </div>
 </div>
 <div class="column" id="column2" >
  <div class="dragbox" id="item4" >
   <h2>Handle 4</h2>
   <div class="dragbox-content" >
    <!-- Panel Content Here-->
   </div>
  </div>
  <div class="dragbox" id="item5" >
   <h2>Handle 5</h2>
   <div class="dragbox-content" >
    <!--Panel Content Here-->
   </div>
  </div>
 </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>

如何使用 jQuery 修复此切换 div？

How to fix this toggle div using jQuery?

html

javascript

css

jquery

toggle