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

您缺少的是在doc准备好时加载脚本。这很简单吗

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

jquery展开/可折叠列表无法正常工作

2 个答案: