0

我想在列表中显示前 5 个名称，并将任何其他名称的显示切换为单个块。

我目前将名称列表作为数组对象，但如果解决方案更简单，我很乐意将其更改为数组。

这是我目前所拥有的 * in *complete 因为我不知道如何创建名称的隐藏 div：

PHP

  $names_count=0;
  echo '<div id='nameList' class='toggler'>';
  foreach($names as $name){
     echo '<a id='name'.$name->acct_id.'>'.$name->full_name.'</a>';
     if($names_count<=4){
       echo '</div><!--toggler div-->';
     } 
     else
        <div class='namesList' style='display:none'>
         //put additional names in hidden div?
        </div>          
     }
     $names_count++;
  } //endforeach

JS: 更新很抱歉造成混乱。这不是一个真正的 javascript 问题，所以我删除了该标签，但我包含以下 jQuery 代码片段以确保 PHP 的完整性

$('.toggler').click(function(){
   var id=this.id;
   $('#'+id).toggle();
});
4

3 回答 3

2

PHP

$names_count = 0;
echo '<div id="nameList" class="toggler">';
foreach($names as $name) {
    echo '<a id="name' . $name->acct_id . '">' . $name->full_name . '</a>';
    if ($names_count == 4) {
        echo '</div><div class="hidden">';
    }
    $names_count++;
} 
echo '</div>';

JS

$('.toggler').click(function(){
   $(this).next().toggle();
});

CSS

.hidden {
    display: none;
}
于 2013-02-06T16:46:01.663 回答
1

这是一个带有两个while循环的示例。

$names = array('Bob', 'Andy', 'Tim', 'Max', 'Roger', 'John', 'Test');
$nameCount = count($names);
$nameIndex = 0;

echo '<div id="nameList" class="toggler">'; 

// Show the first 5 names.
while ($nameIndex < min(5, $nameCount)) {
    $name = $names[$nameIndex++];
    echo '<a id="name' . $name . '">' . $name . '</a>';
}

// Show the remaining names in a hidden div.
if ($nameIndex < $nameCount)
{       
    echo '<div class="hiddenNames" style="display:none">';
    while ($nameIndex < $nameCount) {
        $name = $names[$nameIndex++];
        echo '<a id="name' . $name . '">' . $name . '</a>';
    }
    echo '</div>';     
}

echo "</div>";

该代码产生以下输出。

<div id="nameList" class="toggler">
    <a id="nameBob">Bob</a>
    <a id="nameAndy">Andy</a>
    <a id="nameTim">Tim</a>
    <a id="nameMax">Max</a>
    <a id="nameRoger">Roger</a>
    <div class="hiddenNames" style="display:none">
        <a id="nameJohn">John</a>
        <a id="nameTest">Test</a>
    </div>
</div>

如果您的名字少于 5 个，它也是安全的；该脚本将产生：

<div id="nameList" class="toggler">
    <a id="nameBob">Bob</a>
    <a id="nameAndy">Andy</a>
    <a id="nameTim">Tim</a>
</div>

对于 JS，我可能会做一些类似的事情：

$('.toggler').click(function(){
   $('.hiddenNames').toggle();
});

即使代码更大，我发现从长远来看更容易遵循并且可能更容易维护。（观点）

希望这可以帮助！

于 2013-02-06T17:25:40.353 回答
0

要<div>隐藏：

<div style="display: hidden"></div>

然后 jQuery 应该使用 .toggle() 命令使其可见。

于 2013-02-06T16:40:11.813 回答