Question

我正在尝试在测试网站http://witthotel.perfectlysimple.org/about/的页面底部创建一个可扩展的div。应展开的行是“点击此处显示内容”

div的html代码如下：

<div id="footer-bottom">
    <p class="expand-one">
        <a href="#">Click Here To Display The Content</a> <img src="images/arrow.png" width="5" height="7" />
    </p>
    <div class="content-one">
        <p>This is the content</p>
        <p> that was hidden before, but now is... Well, visible!"</p>
    </div>
</div>

我在标题运行中有以下脚本：

<script>
$(document).ready(function(){
$('.expand-one').click(function(){
    $('.content-one').slideToggle('slow');
});
});
</script>

正如你所看到的，它是一个wordpress网站，所以它应该加载jquery，所以我把引用留了。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

我实际上尝试使用和不使用引用，但问题仍然是相同的：当我点击“点击此处显示内容”时，没有任何事情发生。

非常感谢您的帮助。

Answer 1

因为Wordpress jQuery处于noConflict（）模式，所以你的代码应该是：

<script>
jQuery(document).ready(function($){
$('.expand-one').click(function(){
    $('.content-one').slideToggle('slow');
});
});
</script>

Answer 2

可能你有另一个jquery库，它是冲突的。使用如下代码：

<script>
jQuery(document).ready(function($){
    $('.expand-one').click(function(){
        $('.content-one').slideToggle('slow');
    });
});
</script>

Answer 3

您的自定义脚本有错误未捕获的SyntaxError：意外的令牌＆lt;

并且也没有加载jQuery 未捕获的TypeError：属性＆＃39; $＆＃39;对象[object Object]不是函数

修复这些错误，你会没事的

jQuery可扩展可折叠Div不工作

3 个答案: