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网站的一部分。我已经删除了不适用的内容（比如帖子的日期没有隐藏或是问题的一部分）

<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>

我有＆＃34;入门内容＆＃34;隐藏CSS并尝试在单击博客帖子的标题时切换。

Answer 1

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

$('.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

preventDefault并使用链接作为切换

1 个答案:

DEMO

DEMO