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

【问题标题】：jquery expand / collapsible list not workingjquery展开/折叠列表不起作用
【发布时间】：2013-01-20 01:45:06
【问题描述】：

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

这是所有相关的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

非常感谢！

【问题讨论】：

标签： jquery css wordpress list collapse

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：