javascript - 创建菜单子(monad)菜单，单击更改并显示 + - 符号展开与否

Question

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

-孟加拉国-达卡+兰普拉还显示+美国+澳大利亚等任何一个单击美国然后美国将 - 并显示其城市。但我的代码不能正常工作任何人都可以帮助我吗？？？

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

标清

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

Answer 1

试试这个 Online demo

HTML

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

JS

$(".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('-');
    }

});