1

私はこれに対する他のすべての質問を事実上調べましたが、どの修正も私にはうまくいきませんでした。その下のバイオを切り替えるプロフィール写真を作成しようとしています。slideToggleイベントの横に（this）.を追加する前に、スライドしますが、クラス.bioのすべてのインスタンスをスライドします。（this）.nextを追加すると、コードが壊れます。最新のjquery.jsをjquery-1.8.2.jsとしてフォルダーに保存しています。それはcssの問題でしょうか？どんな洞察もとても役に立ちます。ありがとうございました。 

<script>

             $(document).ready(function() {
             $('.bio').hide();

             $('.toggle').click(function() {
             $(this).next('.bio').slideToggle();
             });
             });
</script>


<div class="profile">
            <div class="profilepic">
            <a class='toggle' href="#"><img src="images/charles.jpg" width="100" height="100" alt="charles"/></a>
            </div><!-- end of profilepic class -->
            <div class="officerinfo">
            <h4 class='toggle'>Dude McDudeson</h4>
            <br>
            <a href="mailto:duuuude@gmail.com">duuuude@gmail.com</a> 
            <h5><a href="positions.html">President</a>
            <br>
            <br>
            </div><!-- end of officerinfo class -->
            <div class="bio" style="display:none">
            <p>description</p>
            </div><!-- end of bio class -->
            </div><!-- end of profile class -->

css

/* Profile */
.profile
{
position: relative;
padding-top:20px;
width: 550px;
height: 150px;
}

/* ProfilePic */
.profilepic
{
float: left;
width: 100px;
height: 100px;
}

/* Officer Info */
.officerinfo
{
width:420px;
float: right;
}

/* Bio */
.bio
{
width: 420px;
float: right;
}
4

1 に答える 1

2

これを試して：

$(this).parent().next('.bio').slideToggle();

この.next()メソッドは、指定されたセレクターに一致する要素が見つかるまで次の要素をスキャンしません。常に、その要素が指定されたセレクターに一致するかどうかに応じて、直後の要素を選択するか、何も選択しません。

ただし、h4.toggle要素の親の直後に要素が続く.bioため、機能する$(this).parent().next('.bio')はずです。

これを行うこともできます：

$(this).closest('div.profile').find('.bio').slideToggle();

つまり、含まれている div 要素まで上に移動し、.profileその要素内で.bioトグルする a を見つけます。これは、要素の前に挿入された他の要素で構造が後で変更されても壊れないため、より堅牢.bioです。

于 2012-10-24T02:21:47.313 に答える