試圖使用jQuery獨立顯示/隱藏多個列表

我有一個網頁，我試圖在默認情況下隱藏額外的信息位。這些額外的比特採用我希望用戶能夠通過單擊JavaScript鏈接來顯示或隱藏的項目列表的形式。試圖使用jQuery獨立顯示/隱藏多個列表

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"); 
    }); 
});

至於我可以告訴大家，一切都設置正確，但是當我點擊鏈接以顯示列表，鏈接更改爲「隱藏」，但列表實際上不顯示。

我在做什麼錯？

來源

2013-03-04 Seascape

你的jQuery選擇是選擇一個類'.billhistory'的所有元素。這可能是它導致所有元素滑出的原因。 – 2013-03-04 23:50:59

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(); 
    }); 
});

FIDDLE

來源

2013-03-04 23:51:15 adeneo

謝謝，完美！ – Seascape 2013-03-05 00:08:30

你需要使用下一個，而不是尋找文本塊：

var billhistory = $(this).closest("p").next(".billhistory");

來源

2013-03-04 23:51:33 mansur

試圖使用jQuery獨立顯示/隱藏多個列表

回答

相關問題