交替两个李没有隐藏，切换

Question

使用隐藏和切换这个脚本运行良好，但我不喜欢链接的移动，因为隐藏的li我喜欢使用detach（）或类似的东西来完全取代两个链接。 感谢

修改：
当您点击显示对话时，隐藏对话会略微向右显示，因为隐藏的li 我无法更改css，因为菜单也是与其他内容一起生成的

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我注意到您在jQuery而不是a标记中选择了li标记。我添加了.parent来选择li。如果您不想这样做，则只需移除您margin-left所设置的li。

替代地

您只需向自己的li添加ID即可点击。这将导致更清晰的代码。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

不是使用display:inline-block作为列表元素，而是可以向左浮动它们并删除列表样式，如：

＆＃13;

＆＃13;

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

＆＃13;

#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;
  list-style:none;
}

#menu li {
  float:left;
  margin-right: 5px;
  text-decoration: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;