Question

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

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

修改我已经得到了这样的html结构，因为它使布局适用于堆叠类别的移动设备。

Answer 1

我已更改了您的HTML结构see this fiddle

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

Answer 2

使用flex容器可以轻松解决此问题。它不仅可以解决您的问题，还可以在响应式网页设计中轻松更改移动设备，并且在语义上也是正确的。

HTML：

<div class="categories">
    <p id="Category1">Test1</p>
    <p id="Category2">Test2</p>
    <p id="Category3">Test3</p>
</div>

<div id="more1" class="moreCategory">
    <p>Content 1</p>
</div>

<div id="more2" class="moreCategory">
    <p>Content 2</p>
</div>

<div id="more3" class="moreCategory">
    <p>Content 3</p>
</div>

CSS：

.categories {
    display: flex;
    width: 100%; /*Not necessary. Make sure its large enough to be clear*/
    flex-direction: row;
}

.categories p {
    width: 30%;
    margin: 2px;
    padding: 3px;
    text-align: center;
    background-color: #000;
    color: #fff;
}

.moreCategory {
    display: none;
}

对于手机：

@media (min-width: 600px) {
    .categories {
       flex-direction: column;
    }
    .categories p {
  width: 100%;
    }
}

JQuery的：

$('#Category1').click(function() {
    if ($('#more1').is(":hidden")) $('#more1').toggle();
    if (!$('#more2').is(":hidden")) $('#more2').toggle();
    if (!$('#more3').is(":hidden")) $('#more3').toggle();
});
$('#Category2').click(function() {
    if (!$('#more1').is(":hidden")) $('#more1').toggle();
    if ($('#more2').is(":hidden")) $('#more2').toggle();
    if (!$('#more3').is(":hidden")) $('#more3').toggle();
});
$('#Category3').click(function() {
    if ($('#more1').is(":hidden")) $('#more1').toggle();
    if (!$('#more2').is(":hidden")) $('#more2').toggle();
    if (!$('#more3').is(":hidden")) $('#more3').toggle();
});

这应该可以解决您的问题。 JS Fiddle

编辑：

如果你真的想要标题标签在一起，但也适用于移动设备，你可以隐藏我的选择控制器，即最顶层的主要div。

隐藏大屏幕的标题标记，并应用相同的CSS。对于移动设备，隐藏控件div并显示标题和moreContent div，而不需要任何JQuery控件。一个简单的if语句应该可以解决问题（检查屏幕大小或用户代理）。

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

2 个答案: