1

写真とテキストを含む複数のdivがあります。ユーザーが「略歴」ボタンをクリックすると、経歴のテキストが表示されます。

画像をクリックした場合にバイオテキストを表示するにはどうすればよいですか？

また、経歴テキストが表示され、ユーザーが別の画像をクリックした場合、以前の経歴テキストを非表示にするにはどうすればよいですか？スライドインとスライドアウトではなく、フェードインとフェードアウトするだけです。

そしてこれは私のjqueryです：

$('.bio-button').click(function () {
   $(this).siblings('.team-text').toggle();
});

$('.team-text .close').click(function () {
   $(this).parent('.team-text').hide();
});


$('.team-member img, .team-member-minor img').click(function() {
if ( !$(this).next('div').is(':visible') ) {
    $(".team-text").slideUp();
    $(this).next('div').slideToggle();
}
});

$('.close').click(function() {
    $(this).parent().slideUp();
});

そしてこれは私のhtmlです

    <div id="" class="team-member">
    <div class="team-text">
        <p>hello this is Billy's text</p>
        <div class="close"></div>
    </div><!-- .team-text -->
    <div class="team-photo">
        <img width="437" height="293" src="http://www.mgrear.com/clients/gls/wp-content/uploads/2013/02/billy.jpg" class="" alt="billy" />                          
        <h2>Billy Senecal</h2>
        <p>Producer / Director</p>
    </div><!-- .team-photo -->
    <div class="bio-button">BIO</div>   
    <div class="clear"></div>
</div><!-- #team-member -->
<div id="" class="team-member">
    <div class="team-text">
        <p>THis is Mark's text</p>
        <div class="close"></div>
    </div><!-- .team-text -->
    <div class="team-photo">
        <img width="439" height="293" src="http://www.mgrear.com/clients/gls/wp-content/uploads/2013/02/mark.jpg" class="" alt="mark" />                            
        <h2>Mark Montalto</h2>
        <p>Editor / Producer</p>
    </div><!-- .team-photo -->
    <div class="bio-button">BIO</div>   
    <div class="clear"></div>
</div><!-- #team-member -->

これがデモへのリンクです。

4

2 に答える 2

1

あなたがレイアウトで何を達成しようとしているのかは完全にはわかりませんが、jQueryに関する限り、これはあなたが探していたものであると思います.

$('.team-photo, .bio-button').on('click', function(){
    $('.team-text').fadeOut();
    $(this).prevAll('.team-text:hidden').fadeIn();
});

http://jsfiddle.net/kYJBM/

「.team-text」要素のデフォルト状態は非表示であるため、クリックするたびにそれらを非表示にしてから、fadeIn() で「:hidden」フィルターを使用して、既に表示されている要素にフェードインしないようにします (これはそうです)。ユーザーがタイルを 2 回クリックするとタイルを非表示にできます)。混乱しているのは、2 つの関数があり、2 つ目の関数が条件付きで実行されることです。これは、これを表現する短い方法です。

if ($(this).prevAll('.team-text').css('display') === 'none') {
    $(this).prevAll('.team-text').fadeIn();
}

（読みやすいように編集されています）

于 2013-03-08T16:59:27.230 に答える
0

タイルのどこでも機能させたい場合：

$('div.team-photo').click(function(){
  $(this).parent().find('.team-text').is(':visible').hide();
  $(this).siblings('.team-text').toggle();
});

さらに写真が必要な場合：

$('div.team-photo > img').click(function(){
  $(this).parent().parent().find('.team-text').is(':visible').hide();
  $(this).parent().siblings('.team-text').toggle();
});

これらは両方とも.team-text、独自の要素を表示する前に他のすべての表示要素を非表示にし.team-text、ユーザーがイベントをもう一度クリックした場合に関連する要素を非表示にします。

于 2013-03-08T16:28:30.037 に答える