Jquery中的错误选择

我是Jquery新手，在选择时遇到一些问题。我正在创建一个手风琴风格，并希望将活动打开元素的框更改为红色。但是，当我将鼠标移开并打开另一个部分时，我希望前面的红色被删除。然而，我这样做有困难

这是我的密码：

CSS

正文{
宽度：500px；
保证金：自动；
文本对齐：居中；
}
dl{
宽度：500px；
}
dd{
保证金：0；
宽度：500px；
填充：1em 0；
浮动：左；
}
dt{
光标：指针；
浮动：左；
宽度：500px；
线高：2米；
背景：#e3；
边框底部：1px实心#C5C5；
边框顶部：1px纯白；
}
dt：第一个孩子{
边界顶部：无；
}
dt:n最后一个孩子（2）{
边框底部：无；
}
dth1{
浮动：左；
字体大小：粗体；
字号：1.5em；
保证金：0；
宽度：400px；
}
.盒子{
浮动：对；
背景色：#999999；
高度：30px；
宽度：30px；
}
bck先生{
背景色：#FF0000；
}
.隐藏{
显示：无；
}
HTML
你的工作时间是几点-
我们全天候营业。
你的工作时间是几点-
我们全天候营业。
你的工作时间是几点-
我们全天候营业。
你的工作时间是几点-
我们全天候营业。
你的工作时间是几点-
我们全天候营业。
（功能（）{
变量dd=$（'dd'）；
dd.filter（'：第n个子（n+4'））.addClass（'hide'）；
$（'dt'）。on（'mouseenter'，function（）{
$（this.find（“div”）.addClass（“bck”）；
$（this.next（）.sides（'dd'）.hide（）；
$（this）.next（）.sides（'dd'）.find（'div'）.removeClass（'bck'）；
$（this.next（）.show（）；
})
})();

div在

dt

元素中，而不是

dd

元素中，因此您需要使用

同级（'dt'）

非

同级（'dd'）

---

演示：

您可以稍微更改顺序，然后首先从所有包含“bck”类的元素中删除该类，并隐藏所有dd

$('dt').on('mouseenter',function () {
   $('.bck').removeClass('bck');
   $('dd').hide();
   $(this).find("div").addClass('bck');
   $(this).next().show();
})

---

为什么$dd.hide（）足以隐藏元素，而不是$（this）.next（）.sides（'dd'）.hide（）@JacklynN，因为

$dd

是一个包含对所有

dd

元素的引用的变量

jQuery(function ($) {
    var $dd = $('dd');
    $dd.filter(':nth-child(n+4)').addClass('hide');
    $('dt').on('mouseenter', function () {
        $(this).find("div").addClass('bck');
        $dd.hide();
        $(this).siblings('dt').not(this).find("div").removeClass('bck');
        $(this).next().show();
    })
});

$('dt').on('mouseenter',function () {
   $('.bck').removeClass('bck');
   $('dd').hide();
   $(this).find("div").addClass('bck');
   $(this).next().show();
})