jquery - jquery展开/折叠列表不起作用

Question

我正在尝试在页面上设置可扩展/可折叠的内容列表，但由于某些愚蠢的原因它无法正常工作。

这是所有相关的javascript：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://digitaldemo.net/forbes/wp-content/themes/forbes/js/jquery.expander.js"></script>
<script>
$('ul.expander li').expander({
  slicePoint: 50,
  widow: 2,
  expandEffect: 'show',
  userCollapseText: '[^]'
});
</script>

和列表代码：

<ul class="expander">
<li>Intro text <span class="read-more"><a href="#">[more link]</a></span><span class="details">and full text goes here</span></li>
</ul>

该站点是一个 WP 站点，但是我没有为此使用插件。我可能错过了一些愚蠢的简单事情，因为我正在通宵达旦。任何输入都会有所帮助。

这是页面：http ://digitaldemo.net/forbes/?page_id=34

非常感谢！

Answer 1

代替

<script>
$('ul.expander li').expander({
  slicePoint: 50,
  widow: 2,
  expandEffect: 'show',
  userCollapseText: '[^]'
});
</script>

经过

<script>
jQuery(document).ready(function($){
  $('ul.expander li').expander({
    slicePoint: 50,
    widow: 2,
    expandEffect: 'show',
    userCollapseText: '[^]'
  });
});
</script>

Answer 2

您缺少的是在文档准备好时没有加载脚本。简单地这样做

<script>
    $(document).ready(function() {
$('ul.expander li').expander({
  slicePoint: 50,
  widow: 2,
  expandEffect: 'show',
  userCollapseText: '[^]'
});
});
</script>