创建菜单子菜单，点击更改，并显示+号展开或不展开

我想创建一个菜单子菜单和子菜单子菜单，可以通过点击展开，然后显示-如果再次点击，则显示+显示菜单锁定，如

-孟加拉国-达卡+拉姆普拉也显示+美国+澳大利亚等任何一个点击美国然后美国将是-并显示其城市。但是我的代码不适合任何人帮助我？？？

   <script language="javascript">
        function changeText(idElement) {
            var element = document.getElementById('element' + idElement);
            if (idElement === 1 || idElement === 2) {
                if (element.innerHTML === '+')
                    element.innerHTML = '-';
                else {
                    element.innerHTML = '+';
                }
            }
        }


    </script>
    <script language="javascript" type="text/javascript">
        $(function () {
            $('.submenu1').hide();
            $('.submenu2').hide();
            $('.submenu3').hide();
            $('.submenu4').hide();
            $('.submenu11').hide();
            $('.submenu').hide();
            $('.sub-submenu1').hide();
            $('.sub-submenu2').hide();
            $('.sub-submenu3').hide();
            $('#submenu0').click(function () {
                //$('#menu').animate({'height': '200'});
                $('.submenu1').toggle("slow");
            });
            $('#submenu1').click(function () {
                //$('#menu').animate({'height': '200'});
                $('.submenu2').toggle("slow");
            });
            $('#submenu-1').click(function () {
                //$('#menu').animate({'height': '200'});
                $('.submenu11').toggle("slow");
            });
            $('#submenu3').click(function () {
                //$('#menu').animate({'height': '200'});
                $('.submenu4').toggle("slow");
            });
        });
    </script>

sd

   <ul id="menu">
        <li id="submenu0"><a id="element1" onClick="javascript:changeText(1)">+</a><a> Bangladesh</a><br></li>
        <li class="submenu1" id="submenu-1"><a id="element1" onClick="javascript:changeText(1)">+</a><a> &nbsp;&nbsp;Dhaka </li>
        <li class="submenu11"><a id="element1" onClick="javascript:changeText(1)">+</a><a> &nbsp;&nbsp;&nbsp;&nbsp;Rampura</li>
        <li class="submenu11"><a id="element1" onClick="javascript:changeText(1)">+</a><a> &nbsp;&nbsp;&nbsp;&nbsp;Mirpur</li>
        <li class="submenu11"><a id="element1" onClick="javascript:changeText(1)">+</a><a> &nbsp;&nbsp;&nbsp;&nbsp;Gulsan</li>
        <li class="submenu1"><a id="element1" onClick="javascript:changeText(1)">+</a><a> &nbsp;&nbsp;chittagong </li>
        <li class="submenu1"><a id="element1" onClick="javascript:changeText(1)">+</a><a> &nbsp;&nbsp;Rajshahi </li>
        <li id="submenu1"><a id="element2" onClick="javascript:changeText(1)">+</a><a> USA</a><br></li>
        <li class="submenu2"><a id="element1" onClick="javascript:changeText(1)">+</a><a> Submenu </li>
        <li class="submenu2"><a id="element1" onClick="javascript:changeText(1)">+</a><a> Submenu </li>
        <li class="submenu2"><a id="element1" onClick="javascript:changeText(1)">+</a><a> Submenu </li>
        <li id="submenu2"><a id="element1" onClick="javascript:changeText(1)">+</a><a> India</a><br></li>
        <li id="submenu3"><a id="element1" onClick="javascript:changeText(1)">+</a><a> etc many more</a></li>
        <li id="submenu4"><a id="element1" onClick="javascript:changeText(1)">+</a><a> Auctions</li>
    </ul>