Javascript 切换时使按钮保持内联块

我有3个类别作为切换功能的按钮。类别如下： 显示内联块，每个块的宽度为30%。 当你点击其中一个时，下面会出现一个段落，但是这会导致其他两个类别显示在该段落下面。但我需要他们站在同一条线上。 这是我的建议，让你明白我的意思。当你点击“Test1”时，“Test2”会移到段落下面，但我需要它保持在原处

如何实现这一目标，有什么建议吗

编辑

---

我有这样的html结构，因为它使分类堆叠的移动设备的布局工作

我已经更改了你的HTML结构

HTML:

JS:

---

我改变了你的HTML结构

HTML:

JS:

---

使用flex容器很容易解决这个问题。它不仅解决了您的问题，还可以在响应性web设计中轻松更改mobile，而且语义正确

HTML:

流动电话：

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

这应该能解决你的问题

编辑：

如果您真的希望标题选项卡在一起，但也适用于移动设备，您可以从my for（例如，最上面的主div）隐藏选择控制器

---

隐藏大屏幕的标题标签，同样的css也适用。对于移动设备，隐藏控件div并显示Header和moreContent div，而不显示任何JQuery控件。一个简单的if语句应该对屏幕大小或用户代理进行trickcheck。

这个问题可以通过使用flex容器轻松解决。它不仅解决了您的问题，还可以在响应性web设计中轻松更改mobile，而且语义正确

HTML:

流动电话：

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

这应该能解决你的问题

编辑：

如果您真的希望标题选项卡在一起，但也适用于移动设备，您可以从my for（例如，最上面的主div）隐藏选择控制器

---

隐藏大屏幕的标题标签，同样的css也适用。对于移动设备，隐藏控件div并显示Header和moreContent div，而不显示任何JQuery控件。一个简单的if语句应该可以对屏幕大小或用户代理进行trickcheck。

谢谢，这很有效。我应该提到的是，我已经有了当前的结构，使其适用于类别将被堆叠的手机。我的谢意，这很有效。我应该提到的是，我已经有了当前的结构，使其适用于类别将被堆叠的手机。我的谢意，但更多。需要直接位于mobileThanks上的类别1、类别2等之下，但更多1、更多2etc。需要直接位于手机上的类别1、类别2等之下

.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%;
    }
}

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