0

我有一个网页，默认情况下我试图隐藏额外的信息。这些额外的位采用项目列表的形式，我希望用户能够通过单击 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

您需要使用 next 而不是 find 文本块：

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