菜单从数据库填充

I am trying to create a side navigation populated from the database. I want the categories to show up on the left hand side and when you click on one the others slide down to make room for the sub categories. However I am having trouble getting them to work properly.

I got the main categories up and running and got it to slide down and display a subcategory hard coded saying "hello world" but now i am trying to populate the sub categories with those from the database I am having trouble getting it all to work.

Here is my code:

this is my database connection

<?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);
?>

Here is the code to display my navigation

    <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>

Here is the javascript that gets the navigation to slide down and up on click

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

as i said, getting the top tier nav to work was fine. it displayed the categories from the database and slid down when clicked. but now im trying to display the sub categories when it slides down I cant.

Any help is greatly appreciated

This happens due to several things in your code

1.In you query , you are setting

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

How it will differentiate the parent category ? Check For: Is it returning value ?

2.May be CSS problem too, can you check for .panel { ... } in your css

3.You closed your Flip Div at the catagory name itself, complete it after panel is over

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

4.Pl try this plain html and check if it works, then you can confirm , which error...is it db or jquery :) Try this:

<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>

Hope it helps!

<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>

You need to alter your html structure. This is a suggestion of how I'd do it (untested code).