jQuery是级联的吗?如果没有，为什么不;我的代码不起作用

Is jQuery cascade? If not, why doesn't my code work?

本文关键字：为什么不 我的 代码 不起作用 如果没有 级联 jQuery      更新时间：2023-09-26

我试图在jQuery中进行div移动（我几乎一无所知），除非我不试图用另一个元素影响一个元素，否则它是有效的。

我想要的是#bodywrapperfloat在单击#clicken时移动。

当我点击时，我可以使用使#clicken移动

<script type="text/javascript">
$(document).ready(function() {
    $('#clicken').click(function() {               
     $(this).animate({
       marginLeft: '-500px'        
      }, 400);
});                                          
});
</script>

我想我可以把它改成：

<script type="text/javascript">
$(document).ready(function() {
    $('#clicken').click(function() {               
     $('#bodywrapperfloat').animate({
       marginLeft: '-500px'        
      }, 400);
});                                          
});
</script>

但随后什么也没发生。我做错了什么？

这是完整的HTML:

<head>
 <meta http-equiv="Content-Type" content="text/html;CHARSET=ISO-8859-2">
<meta http-equiv="Generator" content="TigerII MiniPad (C)2001">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="Stylesheet" type="text/css" href="css/style.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#clicken').click(function() {               
     $('#bodywrapperfloat').animate({
       marginLeft: '-500px'        
      }, 400);
});                                          
});
</script>

 <title>ThinkOne Initiative</title>
</head>
<body>
<div id="headergreen">
<div id="headerwrapper">
<div style="font-weight:500; display:inline-block;">think</div><div style="font-weight:300; display:inline-block;">One</div>
<div id="contactlink"><a href="#">contact</a></div>
</div>
</div>
<div id="bodywrapperfixed">
<div id="bodywrapperfloat">
<table id="ramka">
     <tr>
          <td>random text</td>
          <td><div id="bodywrapper">
<center>
<div id="texten"><div style="font-weight:300; display:inline-block;">Introducing the all-in-one entertainment system.</div><div style="font-weight:500; display:inline-block;">&nbsp;For everyone.</div></div>

<div id="textpl"><div style="font-weight:300; display:inline-block;">Przedstawiamy zintegrowany system rozrywki.</div><div style="font-weight:500; display:inline-block;">&nbsp;&nbsp;Dla wszystkich.</div></div>

<img src="imgs/xboxone.png">

<div id="texten"><div style="font-weight:300; display:inline-block;">Choose your version of the story:</div></div>

<div id="textpl"><div style="font-weight:300; display:inline-block;">Wybierz swoją wersją opowieści:</div></div>


<table id="linki">
<tr>
<td><div id="clicken">en</td>
<td><div id="clickpl">pl</td>
</tr></table>
</center>
</div></td>
          <td>random text</td>
     </tr>
</table>
</div>
</div>
</body>

这是链接：

http://ingame.lh.pl/thinkone/

问题是您的内容在position:absolute内部，而您的bodywrapperfloat是静态的，不能是最近的祖先，所以当它移动时，您的内容不会随之移动。在您的情况下，当您移动body时，内容将移动。

将position:relative添加到您的bodywrapperfloat中，使其成为最近的祖先。因此，当它移动时，position:absolute中的内容也会随之移动

<div id="bodywrapperfloat" style="position:relative">

您的"bodywapper"div包含大部分内容，它是"position:absolute"，请尝试使您的"Bodywapperperfloat"div"position:relative"。然后你至少会得到一些行动。

相关文章：