2012-05-04 20 views
1

私はULリストを持っています、各LIは隠しDIVを持っています、そして、 "More info"リンクは隠れたDIVを示しています。 しかし、このボタンをクリックすると、他のLIの隠しDIVもすべて表示されます。同じクラス名を持つ別々のdivを表示/非表示

LIのDIVを非表示にするにはどうすればいいですか?

私が1つをクリックした場合、どのように他のものを隠すことができますか?後で削除したい場合は、この部分を別にしておきたいと思います。

また、クリックすると、[詳細情報]リンクのテキストが[非表示]に変更されます。 li にアクセスしている間あなたはthisコンテキストを使用する必要があります

答えて

2

次のjQueryが動作するはずです:

<ul> 
    <li><span class="grey_button"><a href="#">Show more information</a></span> 
     <div class="job_description">Job information...</div></li> 
    <!-- other list items... --> 
</ul> 

JS Fiddle demo

$('.grey_button a').toggle(function() { 
    $(this).closest('li').find('.job_description').slideDown(); 
    return false; 
    }, 
    function() { 
     $(this).closest('li').find('.job_description').slideUp(); 
    return false; 
    }); 

これは、次のようなHTMLを想定しています。

なお、デフォルト値は400ミリ秒の代わりに使用される渡される引数を指定せずに、slideUp()/slideDown()に空の文字列を渡す必要(整数(milliseconsの数字)、または文字列)がありません。

参考文献:

+0

1を使用すると、リンクをクリックした場合、それは、他の人(既に開かれているもの)を閉じませんが。 – fragmentedreality

+0

申し訳ありませんが、このコードを使用しようとしていますが、display:noneとdisplay:ブロックがJS Fiddleから見つからない場合、上記のjQueryに追加する必要があるコードを追加してください。ありがとう。 – Chris

0

$(window).load(function() { 

$('.grey_button a').toggle(function() { 
    //hide the other 
    $('.grey_button a').not($(this)).find('.job_description').each(function(){ 
     $(this).slideUp(); 
    }) 

    $('.job_description',this).slideDown(''); 
    return false; 
    }, 
    function() { 
     $('.job_description',this).slideUp(''); 
    return false; 
    }); 

}); 
0

はそれらをすべて非表示になりますクラスの.slideUp()を呼び出し、その後、ちょうど使用してみてください:

は、ここに私の現在のスクリプトです$(this)キーワードを使用して、li内のクラスのみをトリガーします。

試してみてください。

$('.grey_button a').toggle(function() { $('.job_description').slideUp(); $(this).parent().find('.job_description').slideDown(); return false; }

0

このお試しください:HTML構造はこのようであれば

$(window).load(function() { 

var $jobs = $('.job_description'); 
$('.grey_button a').click(function() { 
    $closest = $(this).closest('li').find('.job_description'); 
    $jobs.not($closest).slideUp(); 
    $closest.slideDown(); 
    return false; 
}); 

}); 
1

を::

<ul class="main"> 
    <li> 
     <p class="important-info">Bala bala</p> 
     <p class="more-info" style="display:none;">More bla bla</p> 
     <a class="_show-more-info">More Information</a> 
    </li> 
    <li> 
     <p class="important-info">Bala bala</p> 
     <p class="more-info" style="display:none;">More bla bla</p> 
     <a class="_show-more-info">More Information</a> 
    </li> 
<ul> 

を、次にあなたの条件のためのjQueryのコードは、この

$('_show-more-info').click(function(){ 
    var thisAnchor = $(this); 
    var ul = thisAnchor.parents('.main'); 
    ul.find('.more-info').slideUp(); 
    thisAnchor.sibling('.more-info').slideDown(); 
}); 
1

This codeようになります実際のコンテンツを開き、その他すべてを非表示にします:

<style type="text/css"> 
.job_description { display: none; } 

.grey_button.close span.hide, 
.grey_button.open span.more { display: none; } 

.grey_button.close span.more, 
.grey_button.open span.hide { display: inline; }​ 
</style> 
<script type="text/javascript" encoding="utf-8"> 
$(document).ready(function() { 
    $('.grey_button.close').live('click', function() { 
     $('.grey_button.open').click(); 
     $('.job_description').slideUp(); 
     $(this).siblings('.job_description').slideDown(); 
     $(this).toggleClass('close open'); 
     return false; 
    }); 
    $('.grey_button.open').live('click', function() { 
     $('.job_description').slideUp(); 
     $(this).toggleClass('close open'); 
     return false; 
    }); 
}); 
</script> 
<ul> 
<li>short description 
    <a class="grey_button close" href="#"> 
     <span class="more">read more</span> 
     <span class="hide">hide</span></a> 
    <div class="job_description">Here is more to read.</div> 
</li> 
<li>short description 
    <a class="grey_button close" href="#"> 
     <span class="more">read more</span> 
     <span class="hide">hide</span></a> 
    <div class="job_description">Here is more to read.</div> 
</li> 
<li>short description 
    <a class="grey_button close" href="#"> 
     <span class="more">read more</span> 
     <span class="hide">hide</span></a> 
    <div class="job_description">Here is more to read.</div> 
</li> 
<li>short description 
    <a class="grey_button close" href="#"> 
     <span class="more">read more</span> 
     <span class="hide">hide</span></a> 
    <div class="job_description">Here is more to read.</div> 
</li> 
</ul>​ 
2

のjQuery:

 $('.grey_button a').click(function() { 
      $(this).closest('li').find('.job_description').slideToggle(); 

     }); 

CSSは、ジョブ情報が最初に隠されます

 <ul> 
     <li><span class="grey_button"><a href="#">Show more information</a></span> 
     <div class="job_description" style="display:none" >Job information...</div></li> 

    </ul> 
0

は、チェックアウトこのjsfiddlehereを。 jqueryののfuctionの一見のための

...試してみてください。

$('.top').on('click', function() { 
    $parent_box = $(this).closest('.box'); 
    $parent_box.siblings().find('.bottom').hide(); 
    $parent_box.find('.bottom').toggle(); 
}); 
関連する問題