Question

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

JSFiddle：http://jsfiddle.net/xkzf4wzs/1/

当您点击第一个绿色按钮然后单击第二个时，第一个按钮的内容应该消失。我点击父节点或在它自己的div之外时，使用这个Jquery代码使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();
});

Answer 1

您需要一个单独的处理程序（在相关元素上使用公共类）。

关键是搜索 relative 到被点击的项目（并使用not将其从“关闭所有其他”代码中排除）：

JSFiddle： http://jsfiddle.net/TrueBlueAussie/xkzf4wzs/3/

$(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");
});

注意：我将您的最终hide()更改为slideUp()，因为与其他点击相比，它在视觉上有所震动。

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

1 个答案: