jQuery SlideToggle打開具有相同ID的所有div

Iam新的在這裏，非常業餘的編碼。我有一個問題，我一直在努力幾個小時。我有2個具有相同ID的div，當我將鼠標懸停時，jQuery腳本在兩個div上滑動div。我無法解釋它真的很好，所以在這裏，我發佈了可以看到問題和代碼的網站。感謝您的幫助jQuery SlideToggle打開具有相同ID的所有div

http://prdable.tym.sk/vegas

頁面代碼

echo "<div id='index' style='float:left'>"; 
echo "SEE D-TIME<br>"; 
echo "<span style='font-size:18px;'><i>&quoteverything that need to be seen&quot</i></span>"; 

echo "<p class='roller'>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. 
Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov 
a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, 
a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, 
ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, 
ktorý obsahoval verzie Lorem Ipsum. 
</p> 
</div>"; 

echo "<div id='index' style='float:left; margin-left:40px;'>"; 
echo "SEE N-TIME<br>"; 
echo "<span style='font-size:18px;'><i>&quotmiracles you only see at n-time&quot</i></span>"; 

echo "<p class='roller'>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. 
Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov 
a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, 
a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, 
ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, 
ktorý obsahoval verzie Lorem Ipsum. 
</p> 
</div>";

Jquery的腳本

echo "<script>"; 
echo "$(document).ready(function() { 
    $('div#index').hover(function() { 
    $('p.roller').stop(true,false).slideToggle(300); });});"; 
echo "</script>";

來源

2014-02-16 user3316749

我要把它放在其他文件中。你什麼意思？我必須爲每個ID編寫函數？ – user3316749

'我有2個具有相同ID的div' < - 你不能那樣做。 –

我用下一個方法，而不是最近組建了一個簡單的例子。

http://jsbin.com/petekagu/1/edit?html,css,js,output

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>closest demo</title> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<style> 
    .index { 
    padding: 10px; 
    margin-top: 10px; 
    cursor: default; 
    } 
    .d-time, .e-time { 
    display: none; 
    background-color: yellow; 
    } 
</style> 
</head> 
<body> 
<div class="index"><b>See D Time</b></div> 
<div class="d-time">d time some hidden content here </div> 

<div class="index"><b>See E Time</b></div> 
<div class="e-time">e time some hidden content here </div> 
<script> 
$("div.index") 
.hover(function() { 
    $(this) 
    .next() 
     .stop(true, true) 
     .slideToggle(); 
}); 
</script>

歡迎。首先，您不應使用相同的ID值在頁面上命名多個元素。相反，使用一個類來命名#index div元素。爲了在懸停時觸發正確的元素，請使用類似.closest方法的內容。

http://api.jquery.com/closest/

來源

2014-02-16 20:38:18 Shawn

感謝您的回答。我檢查了最接近的（）方法，現在仍然運氣好。它現在應用在頁面上，所以你可以看看它的功能。 http://prdable.tym.sk/vegas – user3316749

我剛剛使用下一個方法更新了我的答案。希望能幫助你多一點。 – Shawn

謝謝，我在某處移動，我不得不關閉.index divs裏面的.roller div。但是現在當我指向它時，滑動的div不會保持打開狀態：/ ...對不起，jquery對我來說真的是新的 – user3316749

jQuery SlideToggle打開具有相同ID的所有div

回答

相關問題