Javascript 通过单击“更改”创建菜单子菜单，并显示+；-签名是否扩展

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

-孟加拉国-达卡+兰普拉 同时显示+美国+澳大利亚等任何一个点击美国然后美国将-和显示其城市。但是我的代码不是很正常，有人能帮我吗

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

函数changeText（IDEElement）{
var element=document.getElementById（'element'+ideElement）；
if（idElement==1 | | idElement==2）{
if（element.innerHTML==='+'）
element.innerHTML='-'；
否则{
element.innerHTML='+'；
}
}
}
$（函数（）{
$（'.subnum1'）.hide（）；
$（'.subnum2'）.hide（）；
$（'.subnum3'）.hide（）；
$（'.subnum4'）.hide（）；
$（'.subnum11'）.hide（）；
$（'.submenu'）.hide（）；
$（'.sub-subnum1'）.hide（）；
$（'.sub-subnum2'）.hide（）；
$（'.sub-subnum3'）.hide（）；
$（'#子菜单0'）。单击（函数（）{
//$（“#菜单”）.animate（{'height'：'200'）；
$（'.subnum1'）。切换（“慢”）；
});
$（'#子菜单1'）。单击（函数（）{
//$（“#菜单”）.animate（{'height'：'200'）；
$（'.subnum2'）。切换（“慢”）；
});
$（'#子菜单-1'）。单击（函数（）{
//$（“#菜单”）.animate（{'height'：'200'）；
$（'.subnum11'）。切换（“慢”）；
});
$（'#子菜单3'）。单击（函数（）{
//$（“#菜单”）.animate（{'height'：'200'）；
$（'.subnum4'）。切换（“慢”）；
});
});

sd

孟加拉
达卡
+Rampura
+Mirpur
+Gulsan
吉大港
+Rajshahi
+美国

+子菜单
+子菜单
+子菜单
+印度

+等等更多
+拍卖

试试这个

HTMl

试试这个

HTMl

---

谢谢你的帮助。它的工作，但我不能打勾作为正确的答案。你能告诉我为什么我不能选择它并勾选它吗我是新来的谢谢你的帮助。它的工作，但我不能打勾作为正确的答案。你能告诉我为什么我不能选择它并勾选它吗？我是新来的

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

<ul class="menu">
    <li class="root_ment"><a href="#"><span>+</span>Bangladesh</a>
        <ul class="sub_menu" style="display:none;">
             <li class=""><a href="#"><span>+</span>Dhaka</a></li>          
             <li class=""><a href="#"><span>+</span>Rampura</a></li>            
             <li class=""><a href="#"><span>+</span>Mirpur</a></li>             
             <li class=""><a href="#"><span>+</span>Gulsan</a></li>             
             <li class=""><a href="#"><span>+</span>chittagong</a></li>             
             <li class=""><a href="#"><span>+</span>Rajshahi</a></li>           
        </ul>
    </li>
    <li class="root_ment"><a href="#"><span>+</span>USA</a>
        <ul class="sub_menu" style="display:none;">
             <li class=""><a href="#"><span>+</span>Submenu</a></li>            
             <li class=""><a href="#"><span>+</span>Submenu</a></li>            
             <li class=""><a href="#"><span>+</span>Submenu</a></li>            
        </ul>
    </li>
    <li class="root_ment"><a href="#"><span>+</span>India</a>
        <ul class="sub_menu" style="display:none;">
             <li class=""><a href="#"><span>+</span>Submenu</a></li>                         
        </ul>
    </li>
    <li class="root_ment"><a href="#"><span>+</span>etc many more</a>
        <ul class="sub_menu" style="display:none;">
             <li class=""><a href="#"><span>+</span>Submenu</a></li>                         
        </ul>
    </li>
</ul>

$(".root_ment").click(function(){
    if($(this).find("ul").css('display')=="block"){
        $(this).find("ul").hide();
        $(this).find("span").first().text('+');
    }
    else{
        $(this).find("ul").show();
        $(this).find("span").first().text('-');
    }

});