Javascript jQuery删除&；单击添加类

所以我有一个jQuery，它允许我点击一个元素，它将扩展隐藏的内容。但是你可以点击多个元素，它们都会被扩展。我只想在任何一点上扩展一个。。。有人能帮我吗

if( $(window).width() >= 991 ) {
    $('.brands-supply .single').click(function() {
        $id = $(this).attr('href');
        $($id).stop().slideDown('fast');
    }, function() {
        $($id).stop().slideUp('fast');
    });
}

HTML

我们的顾问服务
评论


这是一个p标签

测试


这是ap标签

计划


这是一个p标签

服务


这是一个Ptag

---

感谢您的帮助

首次单击不会将两个函数作为参数。您应该使用

slideToggle

if( $(window).width() >= 991 ) {
    $('.brands-supply .single').click(
        function() {
            var id = $(this).attr('href');
            $('.brands-supply .single').each(
                function () {
                    var href = $(this).attr('href');
                    if (href == id) return;
                    $(href).slideUp('fast');
                }
            );
            $(id).stop().slideToggle('fast');
        }
    );
}

因此，单击选择您附加的所有元素并在其上迭代，如果它们不是当前单击的href，则向上滑动它们。然后只需在单击的一个上使用slideToggle，它将根据当前显示的方式向上或向下滑动它

小提琴：

JS:

CSS:

HTML:

Minor quibble：当变量名是jQuery对象时，您真的应该只在变量名中使用$。例如，$id应该只是id。它不影响代码的正确性，但它只是更好的样式。这仍然不起作用。。。到目前为止，我真的被难住了why@TomTucka用小提琴更新了答案。过来看。对CSS和HTML做了一些猜测，但想法还是一样的。也不确定你试了什么，但我的原始答案在再次查看你的代码后有点改变。

if( $(window).width() >= 991 ) {
    $('.brands-supply .single').click(
        function() {
            var id = $(this).attr('href');
            $('.brands-supply .single').each(
                function () {
                    var href = $(this).attr('href');
                    if (href == id) return;
                    $(href).slideUp('fast');
                }
            );
            $(id).stop().slideToggle('fast');
        }
    );
}

same as above

div > div {
    height: 100px;
    width: 100%;
    display: none;
}

#id1 {
    background: red;
}

#id2 {
    background: blue;
}

#id3 {
    background: orange;
}

<div class="brands-supply">
    <a class="single" href="#id1">id1</a>
    <a class="single" href="#id2">id2</a>
    <a class="single" href="#id3">id3</a>
    <div id="id1"></div>
    <div id="id2"></div>
    <div id="id3"></div>
</div>