单击删除html和javascript

Click to Delete html and javascript

本文关键字：javascript html 删除 单击      更新时间：2023-09-26

我想有两个div并排，第一个包含信息表，另一个将包含两个按钮删除和编辑。我想让第一个div占屏幕的100%第二个div一开始就不在屏幕上一旦我点击第一个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在这涉及到什么。

你可以在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: relative;

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

这是你的头

<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 );
});

});
相关文章：