切换时,使按钮保持内联块状态

Question

我有3个类别作为切换功能的按钮.显示类别,inline-block每个类别的宽度为30%.当您单击其中一个时,会在其下方显示一个段落,但这会导致其他两个类别显示在该段落下方.我需要他们留在一条线上.这是小提琴,所以你可以看到我的意思.单击"Test1"时,"Test2"会移动到段落下方,但我需要它才能保持原样.

任何建议如何实现这一目标？

编辑 我有这样的html结构,因为它使布局适用于堆叠类别的移动设备.

Answer 1

我已经改变了你的HTML结构,看到这个小提琴

HTML:

<div class="Categories">
  <p id="Category1">Test1</p>
  <p id="Category2">Test2</p>
 </div>

CSS:

.Categories p {
    width:33%;
    display:inline-block;
}

JS:

$('#Category1').click(function(){
  $('.moreCategory1').toggle();
});
$('#Category2').click(function(){
  $('.moreCategory2').toggle();
});