Creating a jQuery mobile menu with toggle submenus

Creating a jQuery mobile menu with toggle submenus

Hi
I would love to create a vertical menu for mobile devices. As we know, mobile devices don’t yet support hovers used for the display of sub menus.
 I would love to give mobile users the ability to click on the main portion of the parent menu item to link to the item page. To toggle down (and up) submenus the user has to click on the arrow area on the right of the button where I appended a transparent <span> area.
This process is very important in mobile web design as it gives mobile users the ability to navigate through submenus on the right side of the button while being able to link to any pages using the main side.
Here is the code that I used but the slide toggle is not working very well.

    $('#menu li:has(ul)').append('<span class="toChild">▼</span>');
    $('#menu li.toChild’).click(function (e) {
    $('> ul', this).slideToggle(300);
    return false;
    });

Here are basic CSS codes used:

    #menu li { display: block;}
    #menu a { display: block;}
    #menu > ul > li{float: none;}
    #menu li ul{display: none; position: absolute; z-index: 1000;}
    #menu li ul li{Border:1px solid;}
    #menu li ul li a{ padding: 0 12px;}
    #menu li ul li ul {padding: 0 !important;}
    #menu li ul li ul li a {padding-left: 48px !important;}
    #menu li ul li ul li ul li a{padding-left: 48px !important;}
   
    .toChild { display: block;width: 40px;height: 32px; position: absolute background: transparent; top: 0;right: 0;}

Hope anybody has a suggestion, correction or better way to achieve that menu functionality.
Thanks,
Oliver B