2

だから私は古典的な「より多く/より少ない」段落をここに持っています：

http://jsfiddle.net/dVFaV/38/

「詳細情報」をクリックすると、リンクがいくつかのコンテンツを表示し、同時に「情報が少ない」に切り替わりますが、ページに段落が増えるため、これは一度に 1 つのリンクに対してのみ発生するようにしたいと考えています。現在、「詳細情報」リンクをクリックすると、もう一方のリンクも切り替わります。これを回避しようとしています。

助けていただければ幸いです!!!

4

3 に答える 3

3

HTML 構造がこのままの場合は、次のように単純に使用できます。

function togglePanel() {
    var $this = $(this);
    if ($this.hasClass('button_open')) 
      $this.parent().next().slideDown('slow');
    else 
      $this.parent().next().slideUp('slow');

    $this.hide().siblings().show();
}

$('.adv-toggle-buttons > a').click(togglePanel);

http://jsfiddle.net/WFC7s/

編集:または、 Bondyが彼の答えで言ったように、slideToggle を使用:

function togglePanel() {
    var $this = $(this);
    $this.parent().next().slideToggle('slow');
    $this.hide().siblings().show();
}

$('.adv-toggle-buttons > a').click(togglePanel);
于 2012-10-10T14:00:03.680 に答える
2

なぜtoggle（）とslideToggle（）を使用しないのですか？

HTML

<p class="adv-toggle-buttons">
    <a href="#">[+] More info</a>
    <a href="#" style="display: none;">[-] Less info</a>
</p>
<div class="adv-unit-options" style="display: none;">Lorem ipsum</div>

<p class="adv-toggle-buttons">             
    <a href="#">[+] More info</a>
    <a href="#" style="display: none;">[-] Less info</a>
</p>
<div class="adv-unit-options" style="display: none;">Lorem ipsum</div>

jQuery

$('.adv-toggle-buttons a').each(function() { 
    $(this).on('click', function(){
        $(this).parent().next().slideToggle();
        $(this).parent().find('a').each(function(){
            $(this).toggle();

        });
    });   
});

</ p>

フィドル

http://jsfiddle.net/dVFaV/40/

于 2012-10-10T14:08:54.697 に答える