如何保持<；a href>；元素，该元素具有绑定到javascript的类，不能充当块元素

我试图格式化一个内联导航，但最后一个链接（它有一个绑定到javascript的类）似乎导致整个链接成为一个块元素，而不是将其与导航中的其余链接内联

现在，我已经完成了我的尽职调查，即删除类，将类更改为其他类（不与任何脚本绑定），它使链接恢复正常，这让我相信它与它绑定的javascript有关。我还尝试在css中调用“a.show”以内联和内联块显示它，但没有效果。我觉得我错过了一条众所周知的经验法则

​
|  
​
|  
|  
$（“#容器”）.hide（）；
$（“.show”）。单击（函数（）{
$（“#容器”）。滑动切换（“慢速”）；
});

---

提前感谢您的指导。干杯。

jQuery的

slideToggle（）

函数默认为

display:block

，因此您可以使用回调手动将其设置为

display:inline block

，如“来自用户”中所述

您的代码将是：

$("#container").hide();
$(".show").click(function() {
    $("#container").slideToggle("slow", function() {
        if ($("#container").is(':visible'))
            $("#container").css('display','inline-block'); 
    });
});

您还需要将容器的样式设置为

display:inline block

，除非我误解了您的问题。

UPDATE2 为了防止在单击

.hide

和

.show

链接时出现抖动行为，只需将

事件.preventDefault（）

添加到jQuery函数中即可

<script>
$("#container").hide();
 $(".show, .hide").click(function(event) { // Pass the event object here
     event.preventDefault();              // Then use the preventDefault() property
  $("#container").slideToggle("slow");
});
</script>

当将鼠标悬停在/任何处于活动状态的锚点上时，

.mini nav

的后代锚点为黑色

当鼠标悬停在

.mini nav

上或处于活动状态时，作为其后代的锚点为黑色

变化 一小条

$（“#容器”）.hide（）；
$（“.show.hide”）。单击（函数（）{
$（'.show'）.toggle（）；
$（“#容器”）。滑动切换（“慢速”）；
});
#名称标签{
最大宽度：800px；
最小宽度：550px；
保证金：0自动；
背景色：#FFFFFF；
-webkit盒阴影：2×2×2×1×hsla（0,0%，0%，0.72）；
箱形阴影：2×2×2×1×hsla（0,0%，0,0.72）；
边界半径：43像素；
边框：2px实心#4B4949；
}
#标语牌{
宽度：100%；
高度：自动；
显示：块；
颜色：#fff；
字体大小：30px；
文本对齐：居中；
边框左上半径：40px；
边框右上角半径：40px；
背景色：#0033AA；
垫面：5px；
垫底：10px；
}
#标语牌{
宽度：100%；
高度：50px；
显示：块；
颜色：#FFFFFF；
文本对齐：居中；
边框左下半径：40px；
边框右下半径：40px；
背景色：#0033AA；
垫面：5px；
垫底：10px；
}
#标记底部>a:链接，
a:参观了{
颜色：#fff；
}
#容器{
填充：10px 0px 15px 7px；
保证金：0自动；
显示：表格；
}
.迷你导航{
文本对齐：居中；
字号：18px；
字号：600；
利润率：0px自动10px；
显示：表格行；
}
.miniNav a，
.miniNav a:链接，
.迷你导航a:参观了{
颜色：#0033AA；
文字装饰：无；
显示：表格单元格；
右边框：1px纯蓝色；
填充：0 7px；
}
.迷你导航a:悬停，
.miniNav a：激活{
颜色：#000；
}
.miniNav a：类型的最后一个{
右边框：0px非透明；
}
a、 img{
背景：url(http://placehold.it/80x50/eea/e00?text=First=slide+图像）无重复；
}

你好
我的名字是
​
​
将事件处理程序附加到链接不会更改其显示模式。您确定没有名为
.show
的CSS选择器影响它吗？例如，你有一个上面有class
show
的div（顺便说一句，JS也会附加到这个div上），看起来有很多不相关的代码。但是
slideToggle
没有在任何链接上使用。
#容器
，一个
，默认情况下将是
块
。你是对的，我假设他希望整个容器都是
显示：内联块
，因为我重新创建时链接没有设置为
显示：块
@evan grabenstein你能澄清你想要的功能吗？谢谢zer00ne。这就成功了。有趣的是，自从div出现以来，无论是使用桌子、div还是其他方式，我总是离它最远。是成品。再次感谢您的帮助。非常欢迎您，先生。是的，我开始开发layout的表格时，表格开始成为禁忌，但没有人真正使用
display:table-*
属性，似乎满足于与div的斗争。你的名字标签布局是聪明的，还有一件事要考虑的是当链接被点击时突然猛击，见更新2。
$("#container").hide();
$(".show").click(function() {
    $("#container").slideToggle("slow", function() {
        if ($("#container").is(':visible'))
            $("#container").css('display','inline-block'); 
    });
});

<script>
$("#container").hide();
 $(".show, .hide").click(function(event) { // Pass the event object here
     event.preventDefault();              // Then use the preventDefault() property
  $("#container").slideToggle("slow");
});
</script>

 .miniNav a:hover,
  a:active {
     color: #000;
  }

   .miniNav a:hover,
   .miniNav a:active {
        color: #000;
   }

#container {
  padding: 10px 0px 15px 7px;
  margin: 0 auto;
  display: table;
}
.miniNav {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  display: table-row;
}
.miniNav a,
.miniNav a:link,
.miniNav a:visited {
  color: #0033AA;
  text-decoration: none;
  display: table-cell;
  border-right: 1px solid blue;
  padding: 0 7px;
}
...
.miniNav a:last-of-type {
  border-right: 0px none transparent;
}