javascript - 交替两里不隐藏，切换

Question

使用 hide 和 toggle 这个脚本效果很好，但我不喜欢链接的移动，因为隐藏的 li 我想使用 detach() 或类似的东西来完全替换这两个链接。 谢谢

编辑:
当您单击“显示对话”时，“隐藏对话”会稍微向右显示，因为隐藏了 li。
我无法更改 css，因为菜单是用其他内容动态生成的

     $("a[href='hide']").hide();
	  $("a[href='show'], a[href='hide']").on('click', function(e) {
		e.preventDefault();
		$("a[href='show'], a[href='hide']").toggle();
	});

#menu {
float: left;
text-align: left;
width: 97%;
background-color: #bab3d6;
height: 20px;
line-height: 18px;
}

#menu ul {
padding-left: 10px;
border: 0 none;
margin: 0;
}
#menu li {
display: inline-block;
margin-right: 5px;
text-decoration: none;
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="menu">
 <ul>
   <li>
     <a href="show">Show conversations</a>
   </li>
   <li>
     <a href="hide">Hide conversations</a>
   </li>
 </ul>
</div>

Answer 1

我注意到您在 jQuery 中选择了 a 标签而不是 li 标签。我添加了一个 .parent 来选择 li。如果你不想这样做，你可以简单地删除 margin-left 你设置 li 样式的地方。

或者

您可以简单地将 id 添加到您的 li 并使其可点击。这会产生更简洁的代码。

$("a[href='hide']").parent().hide();
	  $("a[href='show'], a[href='hide']").parent().on('click', function(e) {
		e.preventDefault();
		$("a[href='show'], a[href='hide']").parent().toggle();
	});

#menu {
float: left;
text-align: left;
width: 97%;
background-color: #bab3d6;
height: 20px;
line-height: 18px;
}

#menu ul {
border: 0 none;
margin: 0;
padding-left:5px;
}
#menu li {
margin-left: 10px;
display: inline-block;
text-decoration: none;
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="menu">
 <ul>
   <li>
     <a href="show">Show conversations</a>
   </li>
   <li>
     <a href="hide">Hide conversations</a>
   </li>
 </ul>
</div>