0

デフォルトで余分な情報を非表示にしようとしている Web ページがあります。これらの余分なビットは、JavaScript リンクをクリックすることで、ユーザーが表示または非表示にできるようにするアイテムのリストの形式をとっています。

最初に、次のコードを使用しました: http://jsfiddle.net/4Yk39/2/

 jQuery(document).ready(function() {
   jQuery('.bhlink').click(function(){
     jQuery('ul.billhistory').slideToggle();
   });
 });

...そして、ページ上のJavaScriptリンクのいずれかをクリックすると、すべてのリストが表示または非表示になることを除いて、問題なく動作します。これは私が望んでいるものではありません. クリックすると、JavaScript リンクのすぐ下のリストだけがスライドアウトするようにします。つまり、リストを個別に表示または非表示にする必要があります。

私が現在取り組んでいるコード (別の StackOverflow の質問への回答から派生) は次のとおりです: http://jsfiddle.net/smZct/

$(document).ready(function () {
$(".billhistory").slideUp();
$(".bhlink").click(function() {
    var billhistory = $(this).closest("p").find(".billhistory");
        var txt = billhistory.is(':visible') ? 'Click to view' : 'Click to hide';
        $(this).text(txt);
        billhistory.stop(true, true).slideToggle("slow");
    });
});

私の知る限り、すべてが適切に設定されていますが、リストを表示するリンクをクリックすると、リンクは「非表示」に変わりますが、実際にはリストは表示されません。

私は何を間違っていますか？

4

2 に答える 2

2 
jQuery(document).ready(function($) {
    $('.bhlink').on('click', function () {
        $(this).text(function (i, txt) {
            return txt.indexOf('view') != -1 ? 'Click to hide' : 'Click to view';
        }).closest('p').next('.billhistory').slideToggle();
    });
});

フィドル

于 2013-03-04T23:51:15.133 に答える
1

テキストブロックには、find の代わりに next を使用する必要があります。

var billhistory = $(this).closest("p").next(".billhistory");
于 2013-03-04T23:51:33.620 に答える