1

我有一些html，如下所示：

<div class="location">
    <h3><a class="location_name" href="#">Beijing, China</a><a class="arrow">&gt;</a></h3>
        <p class="blogentry">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit</p>
</div>

我希望能够在单击 .location_name 时向下滑动 .blogentry 。我正在使用 jquery 执行以下操作：

$(function(){
    $(".location_name").click(function(eventObject){
        $(this).parents(".location").find(".blogentry").slideToggle();
    });
});

这是最好的方法吗？如果我以不同的方式布局我的html会更好吗？

谢谢你的帮助

4

3 回答 3

1 
$(".location_name").click(function(eventObject){
    $(this).parent().siblings('.blogentry').slideToggle();
});

[编辑]对不起，错过了<a>被包含在一个<h3>调整过的代码中。现在授予它并没有真正增加OP所写的内容。这是我认为<a>不需要的情况之一，因为没有 javascript 它不会做任何事情。您也可以只制作<h3>可点击的项目。

于 2012-04-10T16:57:46.497 回答
0

你也可以试试这个

$(function(){
    $(".location").on('click', '.location_name', function(e){
        e.preventDefault();
        $(this).parent().siblings('p.blogentry').slideToggle();
    });
});​

注意：您应该使用preventDefault，否则您的页面将跳到顶部href='#'

这是一个例子，另一个例子，这是不同的。

于 2012-04-10T17:12:19.073 回答
0

如果您想更改 HTML 的布局，可以执行以下操作：

<div class="location">
        <h3><a class="location_name" href="#">Beijing, China</a><a class="arrow">&gt;</a></h3>
        <div class="blogentry">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
        </div>
</div>

然后将 jQuery 代码更改为：

 $(function(){
    $(".blogentry").hide();
    $(".location h3").click(function(eventObject){
        $(this).next(".blogentry").slideToggle();
    });
});

不是说这比你现在正在做的更好。但我认为 blogentry 的 jQuery 选择器更容易理解。这也适用于您添加到页面的任何其他位置/博客条目。

这是一个工作示例：jsbin.com/isorig/7

于 2012-04-10T17:43:38.373 回答