Question

你能告诉我为什么锚链接与班级＆＃34;编辑＆＃34;下次显示/显示下一行时会落在下一行吗？

要复制点击，编辑按钮，然后在下面的jsfiddle链接上保存按钮。

HTML

<div id="con">

<a href="#" id="283" class="trash">Delete</a>
<a href="#" id="edit_283" class="edit">Edit</a> 
<a href="#" id="save_283" class="save">Save</a></div>

JQUERY

$(".edit").click(function(){

var ID=$(this).attr('id');

var RemoveIDedit = ID.replace('edit_','');

$(this).hide();

$("#save_"+RemoveIDedit).show();

   });





$(".save").click(function(){

var ID=$(this).attr("id");

var RemoveIDsave = ID.replace('save_','');

$(this).hide()

$("#edit_"+RemoveIDsave).show();

Answer 1

Demo

而不是

$("#edit_"+RemoveIDsave).show();

试试这个

$("#edit_"+RemoveIDsave).css("display","inline");

Answer 2

这归因于display: block;，将其替换为display: inline;

请使用以下代码，我已编辑此

$(document).ready(function() {

  $(".edit").click(function() {
    var ID = $(this).attr('id');
    var RemoveIDedit = ID.replace('edit_', '');
    $(this).hide();
    $("#save_" + RemoveIDedit).css('display', 'inline');

  });



  $(".save").click(function() {
    var ID = $(this).attr("id");
    var RemoveIDsave = ID.replace('save_', '');
    $(this).hide()
    $("#edit_" + RemoveIDsave).css('display', 'inline');

  });

});

.save {
    display: none;
  }
  .save,
  .edit {
    position: absolute;
    padding-left: 5px;
  }
  #con {
    width: 500px;
    height: 500px;
    border: 1px solid;
    boreder-collapse: collapse;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="con"> <a href="#" id="283" class="trash">Delete</a><a href="#" id="edit_283" class="edit">Edit</a>  <a href="#" id="save_283" class="save">Save</a>
</div>a

Answer 3

从样式表中删除位置：.edit和.save的绝对值。

Answer 4

您可以使用Visibility属性而不是display CSS

 .save {
              visibility:hidden;
              }



.save, .edit {
position: absolute;
padding-left: 5px;
}

jquery的

$(document).ready(function() {

        $(".edit").click(function(){
var ID=$(this).attr('id');
var RemoveIDedit = ID.replace('edit_','');
$(this).css("visibility","hidden");
$("#save_"+RemoveIDedit).css("visibility","visible");

           });



            $(".save").click(function(){
var ID=$(this).attr("id");
var RemoveIDsave = ID.replace('save_','');
$(this).css("visibility","hidden");
$("#edit_"+RemoveIDsave).css("visibility","visible");

           });

              });

希望这可能会让你满意

隐藏的锚链接下一行显示

4 个答案: