Javascript 仅展开单击的列

我有以下三列的布局，我使用的是bootstrap。当我单击一列时，该列旁边的每一列也会展开。由于某些原因，我无法将代码片段显示在这里，因此我附加了一个我得到的图像。

如果可能的话，我想改变这种行为。我想点击一列，只展开其中一列，不展开其他列。关于我如何实现这一点有什么想法吗

$（'li.submenu a[href=“#”]”）。单击(
职能（e）{
e、 预防默认值（）；
$（this.toggleClass（'open'）；
$（this.next（）.toggle（）；
$（'.col-md-4'）.toggleClass（'flex-last'）；
返回false；
});
ul.ul\u子菜单{
显示：无；
}
.子菜单a i{
过渡：ease.3s；
}
.子菜单a.打开i{
变换：旋转（-90度）；
}








blabla














blabla














blabla














blabla














blabla














blabla







您可以使用索引来指定要使用的元素：

var elementOne = $(".yourClass")[0];

这将选择该类的第一个元素，对于其他元素，您可以根据需要更改索引
 根据提供的代码，我不能确定，但我相信错误在这一行：

$('.col-md-3').toggleClass('flex-last');

这将查找具有class
col-md-3
的每个元素，并为每个找到的元素切换class
flex last
。（你描述的行为）

您可以将其更改为仅搜索已单击元素的父元素，如下所示：

$(this).parents('.col-md-3').toggleClass('flex-last');

这是使用构建的（如果没有，我建议您阅读相关内容）。您的HTML结构当前是这样构建的：每一行都是一个完整的部分，由
div.row
包装；您正在构建一个由三列组成的单行行。当此
div.row
中的一个子菜单（您的
ul子菜单）展开时，它实际上不会展开其他子菜单，而是展开包含的div（
div.row
）。因为包含块会展开，它会向下推底部的
div.row
，对此我们无能为力。这就是它的工作原理

因此，如果你想在你的问题中指定的行为，你应该考虑这个HTML结构：构建三个列，每个列由<代码> n< /代码>行组成。下面是一个工作示例（以整页模式运行）。一个副作用是垂直堆叠的顺序（尽管我认为这不是什么大问题）

$（'li.submenu a[href=“#”]”）。单击(
职能（e）{
e、 预防默认值（）；
$（this.toggleClass（'open'）；
$（this.next（）.toggle（）；
$（'.col-md-3'）.toggleClass（'flex-last'）；
返回false；
});
ul.ul\u子菜单{
显示：无；
}
.子菜单a i{
过渡：ease.3s；
}
.子菜单a.打开i{
变换：旋转（-90度）；
}








blabla














blabla