Question

我有一些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会更好吗？

感谢您的帮助

Answer 1

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

[edit] 抱歉，错过了<a>包含在<h3>调整后的代码中。现在，它并没有真正增加OP写的内容。这是我认为不需要<a>的情况之一，因为没有javascript它不会做任何事情。您也可以将<h3>设为可点击项目。

Answer 2

你也可以尝试这个

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

注意：您应该使用preventDefault，否则您的网页会跳到href='#'

的顶部

以下是example，另一个example和this is different。

Answer 3

如果您想更改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

使用jquery选择特定元素

3 个答案: