Question

我是Jquery的新手，我在选择时遇到了一些麻烦。我正在创建一个手风琴风格，并希望将活动打开元素的框更改为红色。但是，当我关闭鼠标并打开另一个部分时，我希望删除之前的红色。但是我无法这样做。

这是我的代码：

CSS

body {
    width: 500px;
    margin: auto;
    text-align: center;
}
dl {
    width:500px;
}
dd {
    margin: 0;
    width:500px;
    padding: 1em 0;
    float:left;
}
dt {
    cursor: pointer;
    float:left;
    width:500px;
    line-height: 2em;
    background: #e3e3e3;
    border-bottom: 1px solid #c5c5c5;
    border-top: 1px solid white;
}
dt:first-child {
    border-top: none;
}
dt:nth-last-child(2) {
border-bottom: none;
}
dt h1 {
    float:left;
    font-weight: bold;
    font-size : 1.5em;
    margin:0;
    width:400px;
}
.box {
    float:right;
    background-color:#999999;
    height: 30px;
    width: 30px;
}
.bck {
    background-color:#FF0000;
}
.hide {
    display: none;
}

HTML
<body>
<dl>
    <dt><h1>What are your hours?</h1><div class ="box">-</div></dt>
    <dd>We are open 24/7.</dd>
    <dt><h1>What are your hours?</h1><div class ="box">-</div></dt>
    <dd>We are open 24/7.</dd>
    <dt><h1>What are your hours?</h1><div class ="box">-</div></dt>
    <dd>We are open 24/7.</dd>
<dt><h1>What are your hours?</h1><div class ="box">-</div></dt>
    <dd>We are open 24/7.</dd>
    <dt><h1>What are your hours?</h1><div class ="box">-</div></dt>
    <dd>We are open 24/7.</dd>

</dl>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

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

})

})();
</script>




</body>

Answer 1

div位于dt元素不在dd元素中，因此您需要使用siblings('dt')而不是siblings('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();
    })
});

演示：Fiddle

Answer 2

你可以稍微改变一下顺序，首先从拥有它的所有元素中删除'bck'类并隐藏所有dd。

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

在Jquery中选择时出现问题

2 个答案: