僅單擊指定的鏈接時顯示指定的元素

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(); 如果您希望在單擊時切換元素。