1

Andy Langton の show/hide jQuery コードを使用していますが、同じページで複数のトグルを使用すると、コードに問題があるようです。

複数の表示/非表示を使用すると、正しい単語に切り替わりませんでした。各リンクの設定ではなく、最後のトグル全体を追跡しているように見えました。つまり、最初の記事で「More」をクリックすると、「Less」に変わります。前の記事を非表示にせずに次の記事で [もっと] を押すと、[もっと] のままになり、最初の記事を非表示にしようとすると、その単語は [少ない] のままでした。

これは私が使用しているコードです:

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide
$(document).ready(function() {

    // choose text for the show/hide link - can contain HTML (e.g. an image)
    var showText='MORE ↓';
    var hideText='LESS ↑';

    // initialise the visibility check
    var is_visible = false;

    // append show/hide links to the element directly preceding the element with a class of "toggle"
    $('.toggle').prev('.moree').append('<a href="#" class="toggleLink">'+showText+'</a>');

    // hide all of the elements with a class of 'toggle'
    $('.toggle').hide();

    // capture clicks on the toggle links
    $('a.toggleLink').click(function() {

    // switch visibility
    is_visible = !is_visible;

    // change the link depending on whether the element is shown or hidden
    $(this).html( (!is_visible) ? showText : hideText);
    //$(this).html( ($(this).html() == hideText) ? showText : hideText);

    // toggle the display - uncomment the next line for a basic "accordion" style
    //$('.toggle').hide();$('a.toggleLink').html(showText);
    $(this).parent().next('.toggle').toggle('slow');

    // return false so any link destination is not followed
    return false;

    });
    });

これを修正するための助けをいただければ幸いです。

マルツ

4

4 に答える 4

1

コードの問題は

is_visible要素を切り替えるために同じ var を使用します。

コンテンツの可視性を切り替えるたびに、対応する div の可視性を確認する必要があります。

    $(this).html( ($(this).parent().next('.toggle').is(":visible")) ? showText : hideText);

実際に見る

于 2012-08-18T07:36:58.200 に答える
1

いくつかの書き直しを行いましたが、これはより理にかなっています:

$(function() {
    var showText = 'MORE &darr;',
        hideText = 'LESS &uarr;';

    $('.toggle').hide().prev('.moree')
                .append('<a href="#" class="toggleLink">' + showText + '</a>');

    $('a.toggleLink').click(function(e) {
        e.preventDefault();
        var is_visible = $(this).closest('.moree').next('.toggle').is(':visible');
        $(this).html(is_visible ? showText : hideText)
               .parent().next('.toggle').toggle('slow');
    });
});​

フィドル

于 2012-08-18T07:38:19.837 に答える
0

コードには、すべての隠し DIV の可視性をチェックするための単一のフラグが実際にありました。切り替えられている特定の div が現在非表示になっているかどうかを確認する必要があります

    // change the link depending on whether the element is shown or hidden
    if( $(this).parent().next(".toggle").is(':visible') ) {
              $(this).html(showText);
    }
    else{
              $(this).html(hideText);   
    }

これを確認するためにフィドルを更新しました

更新されたjsfiddle

于 2012-08-18T07:34:33.077 に答える
0

問題はブール値 is_visible です。最初のリンクをクリックすると、false に設定されます。2 番目の要素をクリックしても (最初の要素を再度クリックせずに)、それでも false です。

于 2012-08-18T07:36:57.860 に答える