0

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

我启动并运行了主要类别，让它向下滑动并显示一个硬编码的子类别，上面写着“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>

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

任何帮助是极大的赞赏

4

2 回答 2

0 
<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 结构。这是我如何做的建议（未经测试的代码）。

于 2013-05-08T14:19:59.097 回答
0

发生这种情况是由于您的代码中有几件事

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

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

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

.panel { ... }2.也可能是CSS问题，你能在你的css中检查吗

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>

希望能帮助到你！

于 2013-05-08T14:13:46.977 回答