Question

大家早上好！我有这个Codepen project here。单击深红色按钮，我应该显示/隐藏黄金详细信息div。如何避免幻灯片动画后重新放置橙色div？换句话说，我想保持可拖动性，并在橙色div的左侧打开gold div，这应该始终保持其位置。

这是我正在使用的代码：

$(function() {
  //limit draggability of element to container
  $(".element").draggable({
    containment: document.getElementsByClassName("container")[0],
    handle: document.getElementsByClassName("elHeader")[0]
  });
});

// show details on button click
$(function() {
  $(".expand").on("click", function() {
    $(".elBody").toggle("slide", {
      direction: "right",
      distance: 200,
      duration: 200
    });
  });
});

body {}

.container {
  width: 95vw;
  height: 95vh;
  margin: 20px;
  background-color: lightyellow;
}

.element {
  width: 300px;
  position: absolute;
  overflow: hidden;
}

.elHeader {
  height: 80px;
  width: 80px;
  background-color: orangered;
  cursor: move;
  float: left;
}

.expand {
  height: 15px;
  width: 15px;
  background-color: darkred;
  cursor: pointer;
}

.elBody {
  background-color: orange;
  /*display: none;*/
  height: 80px;
  width: 200px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
  <div class="container">
    <div class="element">
      <div class="elBody"></div>
      <div class="elHeader">
        <div class="expand"></div>
      </div>
    </div>
  </div>
</body>

从右向左滑动，无需重新定位

0 个答案: