Question

我是新来的，非常业余的编码。我有一个问题，我已经被困了几个小时。我有两个具有相同ID的div，当我悬停一个时，jQuery脚本会在两个div上滑动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>";

Answer 1

我使用下一个方法而不是最接近的方法组合了一个快速示例。

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/

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

1 个答案: