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

回答

相关问题