jquery - 使用jquery在排序中隐藏所有内容

Question

我试图在拖动或排序列表时仅隐藏所有内容。请帮我解决这个问题，这是我的 working fiddle .这是我在 fiddle 中使用的 jquery 代码:

$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );

提前致谢

Answer 1

使用启动和停止回调处理程序你可以做到这一点。除了脚本之外，一切都与您的代码相同，只需看一下脚本

/*$( function() {
    $( "#sortable" ).sortable({ 
         start: function (event, ui) {
            ui.item.find(".content").hide();
         },
         stop: function (event, ui) {
          ui.item.find(".content").show();
         }
    });
    $( "#sortable" ).disableSelection();
    
  } );*/ // this is to hide only dragging element content
  
 $( function() {
    $( "#sortable" ).sortable({ 
         start: function (event, ui) {
            $(".content").hide();
         },
         stop: function (event, ui) {
         $(".content").show();
         }
    });
    $( "#sortable" ).disableSelection();
    
  } ); // this is to hide all elements contents

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  h1{
    font-size:12px;
  }
  .content{
    font-size:10px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
  <h1>
  Item 1
  </h1>
  <div class="content">
  Test Content
  </div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
 <h1>
 Item 2
 </h1> 
  
  <div class="content">
  Test Content
  </div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
  
<h1>
  Item 3
</h1>
    <div class="content">
  Test Content
  </div>
  </li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<h1>
  Item 4
</h1>
    <div class="content">
  Test Content
  </div></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<h1>
  Item 5
</h1>
    <div class="content">
  Test Content
  </div></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<h1>
  Item 6
</h1>
    <div class="content">
  Test Content
  </div></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<h1>
  Item 7
</h1>
    <div class="content">
  Test Content
  </div></li>
</ul>