点击删除 html 和 javascript答案

【问题标题】：Click to Delete html and javascript点击删除 html 和 javascript
【发布时间】：2014-08-01 07:48:13
【问题描述】：

我想要两个并排的 div，第一个包含一个信息表，另一个包含两个按钮，一个删除和编辑。我希望第一个 div 成为屏幕的 100%，第二个 div 将从屏幕上开始，然后一旦我单击第一个 div 与表格，第二个将滑出并将第一个 div 推过去并显示删除和编辑按钮

<div id="div1">
   <table>
      <tr>
         <td>Some Information</td>
      </tr>
   </table>
</div>
<div id="div2">
   <button id="delete"></button>
   <button id="edit"></button>
</div>
//Javascript Code
<script>
   $(document).ready(function(){
      $('#div1').click(function {
         //slide div2 out and push div1 to the left to show delete and edit buttons
      });
   });
</script>

我试图使它类似于 iOS 邮件应用程序，您可以在其中滑动删除，但您将单击，如果再次单击，div1 会将 div2 推离屏幕，所以基本上我想切换删除和编辑 div并离开屏幕。

不确定这涉及到什么 javascript 和 css。提前感谢您的任何回答。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以对 div 中的可操作元素进行类似这样的操作，然后根据状态进行移动。

<div id="div2">
    <div class="inner">
       Fusce fermentum
    </div>
    <div class="actions">
        <button id="delete"></button>
        <button id="edit"></button>
    </div>
</div>

#div2 为 position:relatve;

#div2 {
    background: #eeeeee;
    padding: 20px 80px 20px 20px;
    overflow: hidden;
    position: relative;
}

.actions {
    background: red;
    position: absolute;
    height: 100%;
    right: -60px;
    top: 0;
    transition: right 0.2s ease-in-out;
    width: 60px;
}

.reveal .actions {
    right: 0;
}

然后用 jQuery 切换类：

$(document).ready(function() {
    $('#div2').click(function() {
        $(this).toggleClass('reveal');
    });
});

http://jsfiddle.net/P6gAe/1/

【讨论】：

【解决方案2】：

这是你的头

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

将此添加到您的脚本中

$(document).ready(function(){


$( "button" ).click(function() {
  $( "#div1" ).hide( "drop", { direction: "up" }, 500 );
});



});

【讨论】：