Question

我有一个简单的列表，我可以使用Jquery UI进行排序。

一个（或多个）项目的内容是两个div，一个是标题，另一个是内容。标题绑定到隐藏或显示内容的切换事件。

当我使用toogle事件拖动项目时出现问题，会发生偶数被触发且内容隐藏或显示的情况。

有办法防止这种情况吗？

以下是问题的示例：

$("#list").sortable({
  placeholder: "taskPlaceHolder",
  stop: function(e, ui) {

    //code here
    ui.item.fadeTo(250, 1);
  },
  start: function(e, ui) {

    //code here
    ui.item.fadeTo(250, .5);
  }
}).disableSelection();

$("#title").toggle(

  function() {
    $("#content1").hide(500);
  },
  function() {
    $("#content1").show(500);
  });

body {
  color: white
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.taskPlaceHolder {
  border: 3px dashed yellow;
  background-color: #fff;
  height: 40px;
  padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.14/jquery-ui.min.js" integrity="sha256-8vGrOiH2JPV0k8i9YHEcVFr10iQ53qDbkN4ir8mJFFQ=" crossorigin="anonymous"></script>
<ul id="list">
  <li class="red">
    <div id="title">1 - XXXXXXXX</div>
    <div id="content1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </li>
  <li class="blue">2 - XXXXXXXX</li>
  <li class="green">3 - XXXXXXXX</li>
</ul>

拖动红色项目

Answer 1

我明白了，如果有人有同样的问题：我不是100％明白为什么，但显然“FadeTo”以某种方式重置了元素，这就是触发其他事件的原因。

我希望这有帮助。

Jquery ui Sortable触发Toggle事件

1 个答案: