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

Show the specified element when only the specified link is clicked

本文关键字：显示 元素 链接 单击      更新时间：2023-09-26

我有这个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_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");
    }
});

您的代码片段缺少一个Paradishesion

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

请参阅此处的小提琴演示

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

相关文章：