在jQuery中循環顯示和隱藏功能

我想顯示和隱藏網站上的文本。但我必須循環訪問一個xml文件並獲取所有元素。我很難解釋所以這裏是在jsfiddle：http://jsfiddle.net/liveandream/3P2b6/在jQuery中循環顯示和隱藏功能

它不適用於每個單獨的元素。當你點擊閱讀更多時，它會讓雙方都關閉，關閉會使雙方都恢復正常。我將得到的結果數量幾乎不可能知道。我希望有一個人可以幫助我。提前致謝！

來源

2012-03-21 liveandream

身份證必須是唯一的.. – 2012-03-21 21:03:42

或者至少他們應該是 – 2012-03-21 21:06:25

@AshleyDavies在大多數情況下，他們必須是;瀏覽器將始終停止在第一個匹配的ID。 – Blazemonger 2012-03-21 21:12:55

http://jsfiddle.net/3P2b6/3/

固定它。可能沒有儘可能優化，但應該可以正常工作。

來源

2012-03-21 21:12:53

非常感謝你這完美的工作！ – liveandream 2012-03-21 21:28:48

您可能需要調整一下HTML，所以jQuery中的「父」和「子」調用較少，但它不應該有太大區別。 – 2012-03-21 21:30:54

問題是，您將點擊功能附加到#read2，並且有兩個元素的ID爲read2。請注意，元素在文檔中應該有一個唯一的ID，但這是一個不同的討論。

只要你點擊一個元素，它應該找到要摺疊或關閉的元素。例如，當我點擊read1它應該打開或關閉amenities1，當我點擊read2時，它應該打開或關閉amenities2。這意味着你將不得不重命名id和類才能工作。

您可以通過執行以下操作獲取數字：單擊元素時，將其id作爲字符串並從該字符串中獲取數字。然後，構建您希望打開或關閉的元素的id或類（通過執行amenities +數字）並打開/關閉它。

來源

2012-03-21 21:07:58

這個怎麼樣jsFiddle example？我唯一對HTML做出的修改是讓ID唯一（第一個read2現在是read1）。

的jQuery：

$(".amenities").hide(); 
$('.readMore').click(function() { 
    if ($(this).next().is(':visible')) { 
     $(this).next().hide(); 
     $(".arrow",this).html("►"); 
    } else { 
     $(this).next().show(); 
     $(".arrow",this).html("▼"); 
    } 
});

HTML：

<div class="amenitiesWrap"> 
    <div class="readMore" id="read1"> <span class="arrow">►</span> See Room Amenities</div> 
    <div class="amenities"><p>Donec mollis imperdiet lacus ut rhoncus. Pellentesque tincidunt leo vitae mauris varius ut mattis erat condimentum. Donec non tellus ut augue rutrum dignissim vitae eu nibh. Nunc vitae lacinia lectus. Aliquam erat volutpat. Sed quis placerat dolor. Morbi tempus tellus quis eros iaculis posuere. Vivamus a risus nisl. Quisque non turpis massa, vitae mollis urna. Etiam placerat quam eget purus pellentesque rhoncus commodo lorem placerat. Ut in justo enim. Mauris vitae sem eros. Ut aliquam bibendum nulla quis posuere. Maecenas est quam, scelerisque adipiscing laoreet sed, lobortis ac eros. Donec consectetur augue vel nunc rutrum vestibulum.<br /> 
<div class="closeAmenities">Hide Amenities</div></p> 
    </div> 
</div> 

<div class="amenitiesWrap"><div class="readMore" id="read2"> <span class="arrow">►</span> See Room Amenities</div><div class="amenities"><p>Donec mollis imperdiet lacus ut rhoncus. Pellentesque tincidunt leo vitae mauris varius ut mattis erat condimentum. Donec non tellus ut augue rutrum dignissim vitae eu nibh. Nunc vitae lacinia lectus. Aliquam erat volutpat. Sed quis placerat dolor. Morbi tempus tellus quis eros iaculis posuere. Vivamus a risus nisl. Quisque non turpis massa, vitae mollis urna. Etiam placerat quam eget purus pellentesque rhoncus commodo lorem placerat. Ut in justo enim. Mauris vitae sem eros. Ut aliquam bibendum nulla quis posuere. Maecenas est quam, scelerisque adipiscing laoreet sed, lobortis ac eros. Donec consectetur augue vel nunc rutrum vestibulum.<br /> 
<div class="closeAmenities">Hide Amenities</div></p></div></div>

來源

2012-03-21 21:12:53 j08691

在jQuery中循環顯示和隱藏功能

回答

相關問題