隐藏/显示计数是否大于5

时间:2013-10-23 03:28:21

标签: javascript php jquery html wordpress

我正在使用WordPress主题,发现了一个我有点困惑的问题。我正在显示不同城市的办事处清单。这是一个自定义分类法,我使用以下代码显示无序的术语列表。

$wpz_offices = get_the_term_list( $post->ID, 'office', '<li>', '</li><li>', '</li>');
echo $wpz_offices;

它显示了它应该如何,但问题是如果<li>超过5,我想添加一个javascript切换。我不太了解JavaScript实现这一点,所以这就是我寻求帮助的原因。这是否可以使用可用的标记?

所以基本上,如果分类法的<ul>有4个或更少的术语,则通常显示

  • 一个
  • B'/ LI>
  • C
  • d

但如果我们有5个术语显示这个

查看所有办事处点击此处

任何帮助都将不胜感激。

更新 对于那些好奇的人,我是如何使用答案中的帮助的 http://jsfiddle.net/KQBKu/

2 个答案:

答案 0 :(得分:5)

演示 http://jsfiddle.net/yGt4y/

这应该给你一个好主意。 :)

API:http://api.jquery.com/slideToggle/

<强>代码

$(document).ready(function () {

    if ($('ul > li').length > 3) {
        $('#click').show();
        $('ul').hide();
    }

    $('#click').click(function () {
        $('ul').slideToggle();
    });
});

答案 1 :(得分:2)

你应该试试这段代码

<强> Demo Fiddle

var list = $('ul').children().size();

if(list > 4){
    $('ul').children().hide().slice(0,4).show();
    var span = $('<span>').html('show more');
    $(span).toggle(function(){
        $('ul').children().show();
        $(span).html('show less');
    }, function(){
        $(span).html('show more');
        $('ul').children().hide().slice(0,4).show();
    });
    $('ul').after(span);
}