Dropdown menu with categories and sub-categories doesn't work properly

Question

So, I have dropdown vertical menu with categories and subcategories. It is properly populated but I have problem when I click and select some sub-category. It doesn't happen anything. Just dropdown is closed and doesn't load the new page. Here is the cat.php

function category_list($category_parent_id = 0)
{
// build our category list only once
static $cats;
if (!is_array($cats)) {
    $sql = 'SELECT * FROM cat';
    $res = mysql_query($sql);
    $cats = array();
    while ($cat = mysql_fetch_assoc($res)) {
        $cats[] = $cat;
    }
}
// populate a list items array
$list_items = array();
foreach($cats as $cat) {
    // if not a match, move on
    if (( int )$cat['parentid'] !== ( int )$category_parent_id) {
        continue;
    }
    // open the list item
    $list_items[] = '<li>';
    // construct the category link
    $list_items[] = '<a href="product.php?id=' . $cat['id'] . '">';
    $list_items[] = $cat['name'];
    $list_items[] = '</a>';
    // recurse into the child list
    $list_items[] = category_list($cat['id']);
    // close the list item
    $list_items[] = '</li>';
}
// convert to a string
$list_items = implode('', $list_items);
// if empty, no list items!
if ('' == trim($list_items)) {
    return '';
}
// ...otherwise, return the list
return '<ul id="nav-cat">' . $list_items . '</ul>';

}

This is the script for dropdown

        $(document).ready(function () {
        $('#nav-cat > li > a').click(function (e) {
            $('#nav-cat li ul').slideUp();
            if ($(this).attr('class') != 'active') {
                $('#nav-cat li a').removeClass('active');
                $(this).next().slideToggle();
                $(this).addClass('active');
            } else {
                $('#nav-cat li a').removeClass('active');
            }
            e.preventDefault();
        });
    });

When I click on the link $list_items[] = '<a href="product.php?id=' . $cat['id'] . '">'; nothing happen. Here is how I pass on product.php the id . I know is a little messy...

  if(isset($_GET['id']) && is_numeric($_GET['id'])){
   $id = $_GET['id'];
  $query = "SELECT * FROM products WHERE cat = '" . $_GET['id']."'";
  $result = mysqli_query($con, $query) or die("Query failed: " . mysqli_errno($con));
  $line = mysqli_fetch_array($result, MYSQL_BOTH);
  if (!$line) echo '';
      $previd = -1;
      $currid = $line[0];
      if (isset($_GET['id']) && is_numeric($_GET['id'])) {
      $previous_ids = array();
     do {
    $previous_ids[] = $line[0];
    $currid = $line[0];
    if ($currid == (int)$_GET['id']) break;
    $previd = end($previous_ids);
    $line = mysqli_fetch_array($result, MYSQL_BOTH);
} while ($line);
 }

if ($line) {
...

I don't know really where can be the problem. Any ideas? If needed I can post more code.

Answer 1

As stated on the JQuery API for preventDefault , it says "clicked anchors will not take the browser to a new URL". If you're trying to load content without refreshing/leaving the page, consider using AJAX.

On a side note: your recursive php function creates a lot of <ul> with the same id. Consider using class instead.