Question

我有这个html结构

<a href="#" class="dp">Click me</a>

<div class="dp_div" style="display: none;">
  this is the div content
</div>

我希望在点击具有“dp”类的链接时显示具有“dp_div”类的隐藏div，然后单击其他元素（如果当前目标点击元素不是'.dp '和'.dp_div'），相反，点击.dp_div或.dp然后不隐藏.dp_div将隐藏。

这是我到目前为止所做的，但遗憾的是没有工作。

$(document).on('click', function(event) {
    if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div"))
    {
        alert('either .dp or .dp_div is click!!');
    } else {
        alert("not .dp or .dp_div is click");
    }
});

Answer 1

你的代码片段缺少一个问题

$(document).on('click', function(event) {
    if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div"))
    {
        alert('either .dp or .dp_div is click!!');
    } else {
        alert("not .dp or .dp_div is click");
    }
});

请参阅fiddle here了解演示

Answer 2

如果点击HREF（链接），此代码将显示该元素：

$(document).on('click', function(event) {
    if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div")){
        $('.dp_div').fadeIn();
    } else {
        alert("not .dp or .dp_div is click");
    }
});

http://jsfiddle.net/L0LmLquj/

您可以使用：

$('.dp_div').show();

或

$('.dp_div').fadeIn();

甚至： $('.dp_div').toggle();如果您希望在点击时切换元素。

仅在单击指定的链接时显示指定的元素

2 个答案: