Question

我试图在拖动或排序列表时仅隐藏所有内容。请帮帮我，这是我的working fiddle。这是我在小提琴中使用的jquery代码：

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

提前致谢

Answer 1

使用启动和停止回调处理程序，您可以这样做。除了脚本之外，所有内容都与代码相同，只需看一下脚本

即可

<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>

SET @is_base := 'Yes';
SET @days := DATEDIFF('2018-02-26', '2018-02-22');

SELECT
    @is_base,
    @days AS days,
    CASE
        WHEN (@is_base = 'No' AND @days < 7) THEN r.nightly * @days
        WHEN (@is_base = 'No' AND @days >= 7 AND @days < 28) THEN (r.weekly / 7) * @days
        WHEN (@is_base = 'No' AND @days >= 28) THEN (r.monthly / 28) * @days
        ELSE u.base_rate_nightly * @days
    END AS total_price
FROM r

FROM `vs_units` `u`
INNER JOIN (
    SELECT
        CASE
            WHEN ('2018-02-22' <= r.enddate) and ('2018-02-26' >= r.startdate) or ('2018-02-22' <= r.enddate)  and  (r.startdate <= '2018-02-26') THEN 'No'
            ELSE 'Yes'
        END as is_base,
        DATEDIFF('2018-02-26', '2018-02-22') AS days
) params
LEFT JOIN `vs_unit_images` `i` ON `u`.`ID` = `i`.`ID_unit`
LEFT JOIN `vs_unit_rates` `r` ON `u`.`ID` = `r`.`ID_unit` AND (('2018-02-22' <= r.enddate) and ('2018-02-26' >= r.startdate) or ('2018-02-22' <= r.enddate)  and (`r`.`startdate` <= '2018-02-26'))
LEFT JOIN `vs_unit_types_readonly` `t` ON `t`.`ID` = `u`.`ID_unit_type`

Answer 2

如果要在拖动时隐藏内容。

$( function() {
    $( "#sortable" ).sortable({
  start: function( event, ui ) {
    ui.item.find("div.content").hide();
  },
   stop: function( event, ui ) {
    ui.item.find("div.content").show();
  }
});
    $( "#sortable" ).disableSelection();


  } );

https://jsfiddle.net/x53a0Ln8/2/

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

2 个答案: