jQuery，切換切換

我試圖爲論壇創建某種「擾流器」。這很簡單，但我相當新的jQuery。但是現在我在將切換div元素放置在另一個切換div元素內時出現此問題，第二個切換不起作用。任何人都可以將我指向正確的方向嗎？jQuery，切換切換

jQuery的

$(document).ready(function(){ 
    $('.head').click(function() { 
    $('.body').toggle('slow') 
    }); 
});

HTML

<div class="head"> 
Show Content 
</div> 
<!--1st toggle div--> 
<div class="body" style="display:none;"> 
    Content 
    <div class="head"> 
    Show Content 
    </div> 
    <!--2nd toggle div--> 
    <div class="body" style="display:none;"> 
    Content 
    </div> 
</div>

Jsfiddle here.

感謝大家的是試圖幫助:)

編輯：

我發佈後立即看到我在HTML代碼中使用了多個ID。我已經改變了div ID的類，但現在當我點擊顯示content1時，content2 也出現了。有人可以幫我嗎？

來源

2012-05-12 Sev

1問題：'id'屬性在頁面上應該是唯一的。另一種說法是：你不應該用'id'「body」來做兩個元素。嘗試使用「類」。 – artlung

已經看到了，謝謝。還要感謝Joe。 – Sev

對不起Joe，我不能沒有15個聲譽點的upvote：/ – Sev

呀試試這個http://jsfiddle.net/ufC5B/2/

$(document).ready(function(){ 
    $('.head').click(function() { 
     $(this).siblings('.body:first').toggle('slow') 
    }); 
});

來源

2012-05-12 16:07:38

我現在在一個簡單的html頁面上工作。但在論壇上它不起作用。當按下第一個切換按鈕時，內容上下滑動而不停止。論壇軟件是vbulletin btw。誰能幫我這個？ – Sev

@JoeGreen超劇本！兄弟姐妹的東西就像一個魅力！ –

您需要通過類以將其分離，然後用一些漂亮的jQuery遍歷方法，使之清潔。

我們將使用。接下來選擇，這裏有一個現場的jsfiddle。

Working jsFiddle

下面是我用來做它的工作代碼;將頭部和身體改爲類而不是ID。

$(document).ready(function(){ 
    $('.head').click(function() { 
    $(this).next('.body').toggle('slow') 
    }); 
});

來源

2012-05-12 16:11:51 Ohgodwhy

兩個div的顯示出來，因爲$('.body')將匹配在DOM中有一類body所有元素，並在所有設備上的執行的功能。

爲了避免這種情況，請使用專門命名的div或向元素添加其他標識符，如下例所示。

<div class="head" data-depth="1"> 
    Show Content 1 
</div> 
<!--1st toggle div--> 
<div class="body" data-depth="1" style="display:none;"> 
    Content 
    <div class="head" data-depth="2"> 
     Show Content 2 
    </div> 
    <!--2nd toggle div--> 
    <div class="body" data-depth="2" style="display:none;"> 
     Content 
    </div> 
</div> 

$(document).ready(function(){ 
    $('.head').click(function() { 
     var depth = $(this).attr('data-depth'); 
     $('.body[data-depth=' + depth + ']').toggle('slow'); 
    }); 
});

來源

2012-05-12 16:22:05

jQuery，切換切換

回答

相關問題