Question

我正在为我的网站编写jQuery函数。当用户单击任何元素时，它将添加一个css类，如果他们单击另一个元素，它将删除该类。这是我的代码：

<body>
<dl>
    <dt>What's you name</dt>
        <dd>My name is name</dd>
    <dt>What is your occupation</dt>
        <dd>I am a web developer</dd>
    <dt>What do you like</dt>
        <dd>I like programming</dd>
</dl>
<script src="../jquery-1.10.2.js"></script>
<script>
    $(document).ready(function(){
        $("dd").hide();
        $("dl").on("click", "dt", function(){
            var $this = $(this);
            $this.addClass("back")
                    .next()
                    .slideDown()
                    .siblings("dd")
                    .slideUp()
        });
    });
</script>
</body>

Answer 1

使用以下内容：

$("dl").on("click", "dt", function() {
    var $this = $(this);
        $this.siblings("dt").removeClass("back");
        $this.addClass("back")
                .next()
                .slideDown()
                .siblings("dd")
                .slideUp();         
});

DEMO

Answer 2

尝试

$(document).ready(function () {
    $("dd").hide();
    $("dl").on("click", "dt", function () {
        var $this = $(this);
        $this.siblings('dt.back').removeClass('back');
        $this.addClass("back")
            .next()
            .slideToggle()
            .siblings("dd")
            .slideUp()
    });
});

演示：Fiddle

单击后在查询中添加和删除类

2 个答案: