Question

我正在尝试创建从数据库填充的侧导航。我希望类别显示在左侧，当您单击其中一个时，其他类别向下滑动以为子类别腾出空间。但是我无法让他们正常工作。

我启动并运行了主要类别，并让它向下滑动并显示一个子类别硬编码说“hello world”但现在我正在尝试使用数据库中的子类别来填充子类别我遇到了麻烦工作。

这是我的代码：

这是我的数据库连接

<?php 
    $base = ($_SERVER['HTTPS'] ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . '/';
        $mysql_connection = db_connect_enhanced('*********','dbaccess','*******','website');    //Connect to database
        $categories = "SELECT * FROM *********** WHERE active = 1";
        $result = db_query_into_array_enhanced($mysql_connection, $categories);
        $count = count($result);
?>

以下是显示导航的代码

    <div id="left-prod-nav">
        <ul>
            <li class="top">Product Categories</li>
            <?for($i = 0; $i < $count; $i++) 
            {?> 
            <div class="flip"><li><img src="images/arrowright_off.gif" style="padding:0px; margin:0px;float:right;"><a href="#"><?=$result[$i]['categoryName']?></a></li> </div>
                    <? $subCategories = "SELECT * FROM ************* WHERE active = 1";
                    $subCatResult = db_query_into_array_enhanced($mysql_connection, $subCategories);
                    $subCount = count($subCatResult);
                    for($i = 0; $i < $subCount; $i++) 
                    {?>
                        <div class="panel"><?=$subCatResult[$i]['categoryName']?></div>
                    <?}?>

            <?}?>
        </ul>
        <div class="clear">&nbsp;</div>
    </div>

以下是点按

点击导航向下滑动的javascript

<script> 
    $(document).ready(function(){
        $(".flip").click(function(){
            $(this).next(".panel").slideToggle("slow");
        });
    });
</script>

正如我所说，让顶级导航工作得很好。它显示数据库中的类别，并在单击时向下滑动。但现在我试图在滑下时显示子类别我不能。

非常感谢任何帮助

Answer 1

这是因为代码中的一些内容

1.在查询中，您正在设置

SELECT * FROM ************* WHERE active = 1

如何区分父类别？检查：它是否返回值？

2.也可能是CSS问题，你可以在你的CSS中查看.panel { ... }

3.您以自己的名字关闭Flip Div，在面板结束后完成它

  <?}?>
      <?}?>
          </div> //Flip div
              </ul>

4.Pl尝试这个简单的HTML并检查它是否有效，然后你可以确认，哪个错误...是db还是jquery :) 试试这个：

<div id="left-prod-nav">
        <ul>
            <li class="top">Product Categories</li>
            <div class="flip"><li><img src="images/arrowright_off.gif" style="padding:0px; margin:0px;float:right;"><a href="#">categoryName</a></li> </div>
             <div class="panel">c1</div>
             <div class="panel">c2</div>
             <div class="panel">c3</div>
              <div class="panel">c4</div>         
        </ul>
<div class="clear"></div>
</div>

希望它有所帮助！

Answer 2

<div id="left-prod-nav">
    <ul>
        <li class="top">Product Categories
            <ul class="categories">
                <?for($i = 0; $i < $count; $i++) {?> 
                <li class="flip">
                    <a href="#"><?=$result[$i]['categoryName']?></a>
                    <div class="panel">
                        <? $subCategories = "SELECT * FROM ************* WHERE active = 1";
                        $subCatResult = db_query_into_array_enhanced($mysql_connection, $subCategories);
                        $subCount = count($subCatResult);
                        for($i = 0; $i < $subCount; $i++) { ?>
                        <a href="<?=$subCatResult[$i]['categoryLink']?>"><?=$subCatResult[$i]['categoryName']?></a><br />
                        <?}?>
                    </div>
                </li>
                <?}?>
            </ul>
        </li>
    </ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
    $("li.flip > a").click(function() {
        // hide all others
        $("div.panel").slideUp();
        // show the relevant one
        $("div.panel", $(this)).stop().slideDown();
    });
});
</script>

您需要更改html结构。这是我如何做的建议（未经测试的代码）。

菜单从数据库填充

2 个答案: