jquery - 显示一个 div 并使用 href ="#id"隐藏其同级

Question

我遇到了这个website点击后其帖子信息的显示方式激起了我的好奇心。

何时 <a class="data-icon-cont">link</a>单击，<div class="post-data">content</div>将会出现。

如何显示一个 div - 与其他 div 共享类 - 并使用 href="#id" 隐藏其 sibling ？因为我是 jquery 的新手，如果您能简化答案就好了。

另外，查看它的源代码，这是我找到的jquery代码。然而，由于我对jquery缺乏了解。 ，我似乎无法理解代码。

$('.data-icon-cont a').click(function(){
    var id = $(this).attr('href');
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
    $(this).parent().parent().find(id).fadeIn(0);
    $(this).parent().siblings('.post-data').not(id).fadeOut(0);
    return false;
});

Answer 1

让我从他们的网站上分解代码，希望能帮助您创建您正在寻找的解决方案:

1. $('.data-icon-cont a').click(function(){ 
2.     var id = $(this).attr('href'); 
3.     $(this).addClass('active');
4.     $(this).siblings().removeClass('active');
5.     $(this).parent().parent().find(id).fadeIn(0);
6.     $(this).parent().siblings('.post-data').not(id).fadeOut(0); 
7.     return false 
8.  });

1. 第 1 行，他们将一个点击处理程序附加到“.data-icon-cont a”元素。单击处理程序意味着它监视何时单击此元素，然后运行一个函数。如果您熟悉 CSS，这意味着它将影响类“data-icon-cont”元素内部的所有 anchor (a) 标记。当点击事件被触发时，大括号之间的匿名函数将运行(第 2 - 7 行)。

   $('.data-icon-cont a').click(function(){ 
   

2. 在第 2 行，他们创建一个变量并存储我们将在其中搜索的 ID 的名称。他们通过检查被单击元素的 href 属性来找到该变量。

   var id = $(this).attr('href');
   

注意:$(this) 是一个对象，引用第 1 行上的元素，即被单击的元素。

在第 3 行，他们选择了 $(this) 对象并向其添加了“active”类。

$(this).addClass('active');

在第 4 行，他们选择了 $(this) 元素，然后使用 .siblings() 函数调整选择，该函数选择了 $(this) 元素的同级元素。然后从这些 sibling 中删除“active”类。这可以确保只有被单击的元素具有该类，并且它会从之前可能被单击的所有其他元素中删除。

$(this).siblings().removeClass('active');

在第 5 行，我们开始查找要显示或隐藏的元素。首先，他们选择 $(this) 元素。然后，通过使用 .parent() 函数，他们选择它的父容器。然后他们再次使用 .parent() 函数来选择该元素的父容器。现在，他们已经选择了单击的 anchor 标记的祖 parent 容器。这是包含需要隐藏或显示的元素的容器。所以现在他们搜索该容器中的元素，寻找一个 id 与我们在第 2 行获取的变量相匹配的元素:.find(id)。然后他们将其淡入，用 0 标记淡入淡出所需的持续时间(以毫秒为单位)(它是即时的)。

$(this).parent().parent().find(id).fadeIn(0);

他们选择了 $(this) 元素。他们通过parent()函数上升了一级。他们选择了该元素的所有具有“post-data”类的同级元素。从该选择中过滤出包含我们在第二行获取的 id 变量的元素。他们淡出了匹配的元素。

$(this).parent().siblings('.post-data').not(id).fadeOut(0);

返回 false 意味着 a 标签不应触发其通常的点击事件。它只会运行这个函数然后停止。浏览器不会尝试导航到任何地方。

return false

他们关闭了在第 1 行打开的函数和点击处理程序。

});

如果您发布专门使用的 HTML 代码，我可以提供一个具体示例。否则，您只需要了解此示例的工作原理并进行修改以适合您自己的 HTML。