使用JQuery
簡單的做到選單摺疊的功能!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>摺疊選單</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function(){
            $('.ann_header')
            .hover(function() {
                cursorChange(this);
            })
            .click(function() {
                foldToggle(this);
            });
            //.trigger('click');
            
            $('.ann_sub_header')
            .hover(function() {
                cursorChange(this);
            })
            .click(function() {
                foldToggle(this);
            })
            .trigger('click');  // 預設是折疊起來
            
        });
        
        // 打開or摺疊選單
        function foldToggle(element) {
            $(element).next('ul').slideToggle();
        }
        
        // 讓游標移到標題上時,圖案會變成手指
        function cursorChange(element, cursorType) {
            $(element).css('cursor', 'pointer');
        }
    </script>
</head>

<body>
    <ul>
        <li>
            <h3 class='ann_header'>---大標題1---</h3>
            <ul>
                <li>
                    <h4 class='ann_sub_header'>---小標題1---</h4>
                    <ul>
                        <li>
                            ---內容1---
                        </li>
                        <br/>
                        <li>
                            ---內容2---
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <h3 class='ann_header'>---大標題2---</h3>
            <ul>
                <li>
                    <h4 class='ann_sub_header'>---小標題2---</h4>
                    <ul>
                        <li>
                            ---內容3---
                        </li>
                        <br/>
                        <li>
                            ---內容4---
                        </li>
                        <br/>
                        <li>
                            ---內容5---
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>

</html>

arrow
arrow

    seanstar5317 發表在 痞客邦 留言(0) 人氣()