jquery menu; select specific item using a function_问答_开发者

jquery menu; select specific item using a function

开发者 https://www.devze.com 2023-04-11 10:52 出处：网络

Code: http://jsfiddle.net/JhcYu/ <!DOCTYPE HTML> <html lang=\"en-US\"> <head> <meta charset=\"UTF-8\">

相关专题：jquery

Code: http://jsfiddle.net/JhcYu/

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />    
    <script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="script/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">

         $(function() {

            $("#tabs, #tabs2").tabs();

            $('#tabs').tabs('select', 0);

            $('#alt2 li').click(function(e) {

                if($(this).find('>ul').is(':visible'))
                     $(this).find('>span').html('+');
                else
                     $(this).find('>span').html('-');        


                $(this).find('>ul').stop(true, true).slideToggle(150, "swing")
            /*    .end().siblings().find('ul').slideUp().closest('li')    */
                .find('>span').html('+');


                $('#alt2 li').each(function(){
                    $(this).css({ 'font-weight' : 'normal'  });
                });

                $(this).css({ 'font-weight' : 'bold' }).children().css({ 'font-weight' : 'normal' });

                e.stopPropagation();
            });

            $('#alt2 li').each(function(i, val){

                var children = $(val).find('ul li');

                if(children.size() > 0)
                    $(val).prepend('<span>+</span>');


            });

            function selectListitemByText(listitemText) {

                $('#alt2 li').each(function(i, val){

                    var currentListitemText = $(this).clone().children().remove().end().text().trim();

                    if(currentListitemText == listitemText) {

                        //$(val)...
                        return false;
                    }
                });
            }





        });

    </script>

    <style type="text/css">


        body { font: 12px Verdana; }

        .ui-tabs-nav { background: transparent; border-width: 0px 0px 1px 0px;  }
        .ui-tabs .ui-tabs-nav { padding: 0.2em 0 0开发者_运维问答; }
        .ui-widget-content { border: 0; }
        .ui-tabs .ui-tabs-panel { border: 1px solid #aaa; border-width: 1px; border-top: 0;}
        .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-radius: 0; }

        #tabs-2 { padding: 0; }

        #alt2 { width: 500px; margin: 0 auto; }
        #alt2 ul { list-style: none; }
        #alt2 ul ul { display: none; }
        #alt2 li { cursor: pointer; margin: 5px; }

    </style>
</head>
<body>


<div id="alt2">

    <ul>
        <li>
            System Audit
            <ul>
                <li >Site and Contacts</li>
                <li>Current Licenses</li>
            </ul>
        </li>
        <li>
            Expected Result
            <ul>
                <li>
                    Control System Information
                    <ul>
                        <li>ABB Contacts</li>
                        <li>Channel Partner Contact</li>
                    </ul>
                </li>

                <li>Machine ID's</li>
                <li>Current Licenses</li>
            </ul>
        </li>
        <li>
            Quotation
            <ul>
                <li>Lorem</li>
                <li>Ipsum</li>
                <li>Result</li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>

I want a function, "selectListitemByText", that selects a listitem at any depth. The functionality should remain the same (+ turns in to - when expended, font+weight: bold etc). Ive started writing the function but im not really sure how to select the correct parents and children.

Thanks

I have written a function which works pretty well, but I had to had some stuff to your code.

See the comments in this fiddle :

http://jsfiddle.net/59tKg/5/

So, you want to select the item containing the given text? Here you go.

 selectListitemByText(text) {
     $('#alt2').find('li:contains('+text+')');
 }

jquery menu; select specific item using a function

精彩评论

关注公众号

热门标签

图文推荐

jquery menu; select specific item using a function

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：