Question

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>

jQuery代码（带有一些其他子组合的附加代码）

$(document).ready(function(){

$('form#email_formular').hide();
$('p#sign_formular').hide();
$('.content-item#orga').hide();
$('.content-item#feedback').hide();

$('.sub-item a, .sub-item').click(function(){

    var buttonID = $(this).data('target');

    $('table.hidden').hide();
    $('table#' + buttonID).show();

    $('form#email_formular').hide();        
    $('p#sign_formular').hide();

    $('form#' + buttonID).show();
    $('p#' + buttonID).show();

    $('.content-item#overview').hide();
    $('.content-item#orga').hide();
    $('.content-item#feedback').hide();
    $('.content-item#' + buttonID).show();

});

});

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

问题：

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

我对jQuery很新，所以当你向我展示解决问题的方法时，请记住这一点。：）

Answer 1

实现这一目标的一种方法是拥有两个<div>容器 - 一个用于显示内容，另一个用于隐藏。在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>

在CSS中，指定

.hidden_content{
    display: none;
}

当用户悬停或点击用户界面的相关部分时，使用Javascript显示.hidden_content。

编辑：我刚刚意识到我没有回答关于悬停和上下滚动的部分。对于悬停部分，只需添加hover listener（jQuery：$('#shown_content').hover(function(){ showAllContent(); });或其他内容）。

对于向上/向下按钮，您可以让用户在包含<div>和.shown_content的{{1}}内自然滚动，也可以添加按钮并使用jQuery {{3}操纵包含div的滚动位置。

滚动子subavav中的内容

1 个答案: