jQuery slideToggle无法在列表标签上工作

由于某种原因，我无法让我的SlideToggle正常工作。我的列表'tellusmore'被设置为显示：没有任何权利的蝙蝠，当你点击类'tellustoday'我希望列表slideToggle（显示）。jQuery slideToggle无法在列表标签上工作

<div id="tellus"> 
    <h2>Have You Used This Product?</h2> 
     <span class="tellustoday">Click Here to tell us about it!</span> 
     <ul class="tellusmore"> 
      <li id="sendreview"><a href="">Write a quick review</a></li> 
      <li id="sendpicture"><a href="">Send us pictures of your unit</a></li> 
      <li id="sendvideo"><a href="">Send us a video of your product</a></li> 
     </ul> 
</div> 

$(".tellustoday").click(function() { 
$('.tellusmore').slideToggle("fast"); 
}); 

#tellus { 
-moz-border-radius: 4px 4px 4px 4px; 
background-color: white; 
border: 1px solid #E8E8E8; 
line-height: normal; 
padding: 15px 6px 15px 6px; 
margin-bottom:10px; 
} 
#tellus h2{ 
color: #004B6C; 
font-size: 20px; 
text-transform: uppercase; 
font-family: georgia,serif; 
text-align: center; 
font-weight: bold; 
margin:5px 2px; 
} 
.tellustoday { 
color: #004B6C; 
text-decoration: underline; 
text-transform: none; 
font-weight: normal; 
font-size: 14px; 
cursor: pointer; 
} 
.tellusmore { display:none; }

来源

2011-05-03 ToddN

你可以发布你用过的css类吗？ – Nirmal 2011-05-03 12:57:45

单击时发生了什么？必须有其他一些CSS /脚本干扰，您发布的标记和代码没有任何问题：http://jsfiddle.net/JwuXp/ – DarthJDG 2011-05-03 12:59:58

我已经使用标记的CSS更新了上述内容。 @DarthJDG点击时没有任何事情发生。 [见右下方示范页面中间]（http://v725959.htrhdfbkcym2.demo6.volusion.com/True_GDM_49_2_Door_Merchandiser_Refrigerator_p/tru-gdm49.htm） – ToddN 2011-05-03 13:03:09

它似乎为我工作：http://jsfiddle.net/UUsBm/。

您是否在页面中添加了对jQuery的引用？

在您的网页上是否存在与此冲突的其他JavaScript或CSS？

来源

2011-05-03 13:08:46 Graham

是的，这一直是问题。页面上还有更多的JavaScript。不过，我有上面类似的JavaScript，它工作正常。 – ToddN 2011-05-03 13:13:29

它现在有效，它没有被正确引用。在'$（document）.ready（function（）{' – ToddN 2011-05-03 13:16:01

确切地说，你有绑定你的代码？

$(".tellustoday").click(function() { 
$('.tellusmore').slideToggle("fast"); 
});

因为你的活页，它不抛出任何错误，或者它不会做什么...

可能是你需要把它里面的document.ready（）..

你可以通过在调用slideToggle（）之前放置一些alert或console.log语句来测试吗？

来源

2011-05-03 13:15:22 Nirmal

看来你正在用你的jQuery准备函数生成HTML的内容，这很好。问题在于，绑定事件的JavaScript代码位于单独的<script>标记中，这意味着只要它被解析，它就会立即执行，几乎可以肯定的是，在jQuery的ready事件中将内容插入到DOM中之前就会执行该代码。

解决方案是将事件绑定在将您的内容插入到ready函数中或将其包装在自己的ready函数中之后立即发生。多重就绪函数按照它们被解析的顺序执行，因此请确保在事件绑定之前解析插入。

在DOM加载之前使用jQuery函数永远不是一个好主意，即使您想立即运行某个脚本，将其包装为一个就绪函数。这可以确保DOM和jQuery完全加载。为了简单起见，使用$(function(){...}。

来源

2011-05-03 13:22:18 DarthJDG

jQuery slideToggle无法在列表标签​​上工作

回答

相关问题

jQuery slideToggle无法在列表标签上工作