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 がなければ何もしないので、必要ないと私が主張する例の 1 つです。<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 に答える