JQuery onclick显示一个div类-单击div外/自身会使它消失，但其他可单击的元素不会消失？

在我的网站上，我有3个多选下拉列表，当我点击其他可点击的元素时需要关闭。 这就是我的意思：

JSFiddle：

当你点击第一个绿色按钮，然后点击第二个，第一个按钮的内容应该消失。 我使用Jquery代码使div内容在单击父级或其自己的div外部时消失。 问题是，当我点击任何其他“可点击”元素时，内容不会消失，就像其他页面上的其他下拉列表或复选框一样

单击第二个按钮时，如何使第一个内容消失

代码：

$(document).ready(function(){
    $('.click').click(function(event){
        event.stopPropagation();
         $(".showup").slideToggle("fast");
    });
    $(".showup").on("click", function (event) {
        event.stopPropagation();
    });
});

$(document).on("click", function () {
    $(".showup").hide(); 
});


$(document).ready(function(){
    $('.click2').click(function(event){
        event.stopPropagation();
         $(".showup2").slideToggle("fast");
    });
    $(".showup2").on("click", function (event) {
        event.stopPropagation();
    });
});

$(document).on("click", function () {
    $(".showup2").hide();
});

---

对于相关元素上的公共类，您只需要一个处理程序

关键是相对于单击的项目进行搜索，并将其从关闭所有其他代码中排除，而不是：

JSFiddle：

---

注意：我将您的最终隐藏更改为slideUp，因为与其他单击相比，它在视觉上不和谐。

非常感谢，伙计！！！我真的很感激：对不起，对于Jquery，我真的很不爽。我希望我能帮助你-我没有15个名声：*

$(document).ready(function () {
    $('.click').click(function (e) {
        e.stopPropagation();
        var target = $(this).parent().find('.showup');
        $('.showup').not(target).slideUp("fast");
        target.slideToggle("fast");
    });
    $(".showup").on("click", function (e) {
        e.stopPropagation();
    });
});

$(document).on("click", function () {
    $(".showup").slideUp("fast");
});