如何改变我的目标<；部门>；通过CSS或jQuery使用另一个

我有一个可以显示数百行数据的页面。每行数据可以有1到9个选项。单击任意1个“选项”将向下滑动一个div，并显示该行/选项的2个可能操作。我计划为这些操作提供AJAX功能

现在，为了进行测试，我有一个可见的div调用

。在这里

，黄色，我想隐藏它。单击该选项时，此处的

.here

将使用我的操作打开，而不是当前打开的

。它在选项下面打开，看起来很糟糕。我知道这就是我的HTML/CSS的结构，但我不知道还有其他方法。任何解决方案，无论是HTML/CSS还是jQuery，都将不胜感激

$（文档）.ready（函数（）{
$（“.dropdown link”）。单击（函数（e）{
e、 预防默认值（）；
var$div=$（this.next（'.dropdown container'）；
$（“.dropdown container”）.not（$div）.slideUp（“slow”）；
如果（$div.is（“：可见”））{
$div.slideToggle（“慢”）；
}否则{
$div.slideDown（“慢”）；
}
});
$（文档）。单击（函数（e）{
var p=$（e.target）.最近（'.dropdown'）.长度
如果（！p）{
$（“.dropdown container”）.hide（）；
}
});
});
.bind\u区域{
保证金：5px；
填充：7px 5px；
文本对齐：左对齐；
字号：700；
字号：0.875em；
边界半径：4px；
边框：1px实心#666666；
背景色：#2e；
}
.bind_名称{
显示器：flex；
}
.下拉列表{
显示：块；
填充物：2px 5px；
边框：1px纯红；
柔性流：柱包裹；
}
.下拉链接{
显示：内联flex；
利润率：0px 5px；
光标：指针；
填充：3x10px；
文字装饰：无；
边界半径：4px；
背景：repeat-x中心#000000；
盒影：rgba（255，255，255，0.15）1px 1px；
-webkit盒阴影：rgba（255，255，255，0.15）1px 1px；
颜色：#CCFF66；
}
.下拉式容器{
边缘顶部：5px；
左边距：0px；
显示：无；
背景颜色：灰色；
}
.这里{
xdisplay：无；
边缘顶部：5px；
高度：25px；
边框：1px纯蓝色；
背景颜色：黄色；
宽度：85%；
}

选项00
继续


取消


选项01
继续


取消


选项02
继续


取消




选项00
继续


取消


选项01
继续


取消


选项02
继续


取消
我建议使用jQuery查找最近的
.bind\u区域
祖先，然后在该祖先元素中查找
。此处
元素。我还建议使用来确定特定选项区域中哪个选项处于活动状态

下面是一个演示：


$（函数（）{
变量$allHeres=$（'.here'）；
$（“.dropdown link”）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var$thisHere=$this.closest（'.bind_Area'）。find（'.here'）；
var thispoption=$this.data（'option'）；
//关闭所有不是这个的
$allHeres.not（$thisHere.slideUp（“慢”）；
//如果此选项区域未设置为此选项。。。
if（$thisHere.data（'option'）！=thispoption）{
//显示此选项区域
$thisHere.slideDown（'slow'）；
//将选项区域设置为当前选项
$thishhere.data（'option'，thishoption）；
$thishhere.text（thisOption）；
}否则{
//切换此选项区域
$thisHere.slideToggle（'slow'）；
}
});
});
.bind\u区域{
保证金：5px；
填充：7px 5px；
文本对齐：左对齐；
字号：700；
字号：0.875em；
边界半径：4px；
边框：1px实心#666666；
背景色：#2e；
}
.bind_名称{
显示器：flex；
}
.下拉列表{
显示：块；
填充物：2px 5px；
边框：1px纯红；
柔性流：柱包裹；
}
.下拉链接{
显示：内联flex；
利润率：0px 5px；
光标：指针；
填充：3x10px；
文字装饰：无；
边界半径：4px；
背景：repeat-x中心#000000；
盒影：rgba（255，255，255，0.15）1px 1px；
-webkit盒阴影：rgba（255，255，255，0.15）1px 1px；
颜色：#CCFF66；
}
.下拉式容器{
边缘顶部：5px；
左边距：0px；
显示：无；
背景颜色：灰色；
}
.这里{
显示：无；
边缘顶部：5px；
高度：25px；
边框：1px纯蓝色；
背景颜色：黄色；
宽度：85%；
}

选项00
选项01
选项02
选项00
选项01
选项02
您已经得到了一个非常好的答案，但我将给您一些备选方案和一些思考

首先，让我们把它变得更具语义。实际上，您有指向页面另一部分的链接，因此让我们使用

选项00
继续
取消
选项01
继续
取消
选项02
继续
取消




选择10
继续
取消
备选方案11
继续
取消
备选案文12
继续
取消
哇，非常感谢。你提供的解释令人惊讶。再次感谢你。切换betwe