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

Question

我有这个HTML结构

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

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

我想在单击具有“ dp”类的链接，然后单击到其他元素（如果当前目标click元素不是“ .dp”和“ .dp_div'），则.dp_div将被隐藏，相反，当单击.dp_div或.dp时，则不隐藏。

到目前为止，这是我尝试过的方法，但遗憾的是无法正常工作。

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

请在这里查看小提琴以进行演示

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(); 如果您希望在单击时切换元素。