Question

出于某种原因，我无法让我的SlideToggle工作。我的列表'tellusmore'设置为显示：没有关闭，当您点击类'tellustoday'时，我希望列表滑动切换（显示）。

<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; }

Answer 1

您似乎在jQuery ready函数中使用HTML生成内容，这很好。问题是你绑定事件的javascript代码是在一个单独的<script>标记中，这意味着它将在解析之后立即执行，几乎肯定是在你的内容在jQuery的ready事件中插入DOM之前。 / p>

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

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

Answer 2

这似乎对我有用：http://jsfiddle.net/UUsBm/。

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

您的网页上是否还有其他javascript或css与此相冲突？

Answer 3

你确切地绑定了你的代码吗？

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

因为在你的实况页面上，它没有抛出任何错误，或者它没有做任何事情......

可能需要将它放在document.ready（）..

中

你可以在调用slideToggle（）之前输入一些alert或console.log语句进行测试吗？

jQuery slideToggle无法处理列表标记

3 个答案: