jquery - 防止默认并使用链接作为切换

Question

首先，我刚刚开始学习 jQuery。

我试图阻止博客标题链接上的默认，而是将其用作其下方博客内容的切换。因为所有博客条目都使用相同的类，所以我需要使用 .next 来仅选择下一个类。我希望得到有关如何使此代码工作的任何建议。谢谢!

<script type="text/javascript">
$('.u-url').click(function(event){
    event.preventDefault();
});

$('.u-url').click(function(){
 $(this).next('.entry-content').toggle();
});
</script>

标记很复杂......但我没有创建它。它是 Squarespace 网站的一部分。我已经删除了不适用的 div(例如未隐藏的发布日期或问题的一部分)

<h1 id="yui_3_17_2_1_1406693227055_2849" class="entry-title p-name" data-content-field="title">
    <a id="yui_3_17_2_1_1406693227055_2848" class="u-url" rel="bookmark" href="url-here"></a>
</h1>
<div class="entry-content"></div>

我用 CSS 隐藏了“entry-content”，并尝试在单击博客文章标题时切换它。

Answer 1

尝试使用 .closest() 获取与提供的选择器匹配的父级，然后使用类 .entry-content 获取其下一个元素，然后切换它。

$('.u-url').click(function(event){
   event.preventDefault();
   $(this).closest(':header').next('.entry-content').toggle();
});

DEMO

您的代码不起作用，因为 .entry-content 不是当前元素的直接同级元素，即] $(this)

<小时/>

编辑:

$('.u-url').click(function(event){
   event.preventDefault();
   $(this).closest('header.entry-header').next('.entry-content').toggle();
});

DEMO