Question

我有3个<a>，其中所有类.info-btn都带有data="1"参数（从1到3）。

如果您点击<a>上的课程.info-btn，则应该在var data=*中获得x参数，并且应该使用$('.div-info-'+x).fadeToggle("fast");创建一个可见的div类.div-info-*（* = 1,2或3;每个类都存在）

我还想要的是：如果点击位于<a class=".info-btn"上的其他位置，它应该隐藏可见的div。

我创造的和可用的......

   $(".info-btn").click(function(e){ 
        var x = $(this).attr('data');
        $('.div-info-'+x).fadeToggle("fast");
    });`

但仅适用于在课程点击时切换，但不能在其他地方点击隐藏。

我的代码我为另一件事尝试了什么..

$(document.body).click(function(e){

            if ((".info-btn").click())
            {
                var x = $(this).attr('data');
                $('.div-info-'+x).fadeToggle("fast");
            }
            else (!(".info-btn").click())
            {
                var x = $(this).attr('data');
                $('.div-info-'+x).fadeToggle("fast");
            }

        });

我希望你们中的某些人可以帮助我，并为我那些糟糕的英语家伙抱歉...

Answer 1

您可以使用.data()存储点击的元素。在文档点击后，检查目标是否既不是div也不是它的父（可选），隐藏它。

HTML 的

<a class="info-btn" data="1" href="#">INFO</a>

<div class="div-info-1">Sortierung der Kategorien wird automatisch drei mal täglich ausgeführt. Sortierung Ende Juni 2013 anpassen!</div>

的JavaScript

$(".info-btn").click(function (e) {
    var x = $(this).attr('data');
    $('.div-info-' + x).show();
    $(".info-btn").data('clickedDivId', '.div-info-' + x);
    return false;
});

$(document).on('click', function (e) {
    console.log('document clicked');
    var target = e.target;
    var clickedDiv = $(".info-btn").data('clickedDivId');
    if (!$(target).is(clickedDiv) && !$(target).parents().is(clickedDiv)) {
        $(clickedDiv).hide();
    }
});

Working Demo

jQuery：在课堂上点击：切换div并在其他地方点击：隐藏div

1 个答案: