Php 滚动我的子导航栏中的内容

HTML代码

<div id="subnavigation">
    <?php
    $verbindung = mysql_connect("host", "user" , "pw") 
    or die("Verbindung zur Datenbank konnte nicht hergestellt werden"); 

    mysql_select_db("db") or die ("Datenbank konnte nicht ausgewählt werden");

    $sub_instr = mysql_query("SELECT * FROM instrument ORDER BY InstrName");

    while($sub = mysql_fetch_assoc($sub_instr))
    {?>
    <div class="sub-item" data-target="<? echo $sub["InstrID"] ?>">
        <a href="#" data-target="<? echo $sub["InstrID"] ?>"><? echo $sub["InstrName"] ?></a>
    </div><?
    }?>
</div>

我没有发布css文件，因为我认为它不是必需的。（如果你还需要它，就告诉我）

问题:

subnav从SQL数据库获取其内容。在本例中，有10多个条目。这对于我的页面设计来说太长了，所以我想将显示的内容限制为4-5个条目，并通过将鼠标悬停在子导航上，让用户可以在div的顶部和底部使用两个小箭头向下/向上滚动

---

我对jQuery非常陌生，所以当您向我展示解决问题的方法时，请记住这一点。：）

实现这一点的一种方法是使用两个

容器—一个用于显示内容，另一个用于隐藏内容。将循环计数器变量添加到while循环中，并按如下方式检测它：

<div class="shown_content">
<?php
$loopcount   = 0;
$shown_limit = 5;

while(){ // your db loop
    if($loopcount == $shown_limit){
        ?></div><div class="hidden_content"><?php
    }

    // output the row

    $loopcount++;
}
?>
</div>

当用户悬停或单击UI的相关部分时，使用Javascript显示

.hidden_内容

编辑：我刚刚意识到我没有回答悬停和上下滚动的部分。对于悬停部分，只需添加一个（jQuery:

$（'#显示的内容'）。悬停（function（）{showAllContent（）；}）；

或其他内容）

---

对于向上/向下按钮，您可以让用户在同时包含

显示内容
和
隐藏内容
的
内自然滚动，或者添加按钮并使用jQuery在所述包含分区内操纵滚动位置。
Thx！我会尽量记住这一点，即使是这么早/这么晚；php部分帮助很大。谢谢对于jQuery部分，我仍然需要很多帮助，但我将尝试先编写一些代码。
<div class="shown_content">
<?php
$loopcount   = 0;
$shown_limit = 5;

while(){ // your db loop
    if($loopcount == $shown_limit){
        ?></div><div class="hidden_content"><?php
    }

    // output the row

    $loopcount++;
}
?>
</div>

.hidden_content{
    display: none;
}