隐藏的锚链接下降在下一行一旦显示

Hidden anchor link falling in next line once show

本文关键字：一行 显示 链接 隐藏      更新时间：2023-09-26

你能告诉我为什么下次显示/显示带有类"edit"的锚链接时会落在下一行吗？

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

JS Fiddle

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

演示

而不是这个

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

试试这个

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

从样式表中删除position:absolute for.edit and.save。

这是由于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

您可以使用Visibility属性而不是displaycss

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

希望这能让你满意

相关文章：