JQuery简单切换

css：

<style type="text/css">.main{cursor:pointer;}.list{border:1px solid black;display:none;}.list li{cursor:pointer; border:1px solid red;list-style:none;}</style>

JQuery：

<script>此处需要一个类库</script>

<script type="text/javascript">    $(document).ready(function(){        $(".main").click(function(e){            $(".list").toggle();            e.stopPropagation();        })        $(document).click(function(){            $(".list").hide();        })        $(".list li").click(function(){            $(".main").text($(this).text());            $(".list").hide();        })    });</script>

html：

<div style="width:200px;margin:20px;">    <div class="main">你点我试试！</div>    <div class="list">        <ul>            <li>我是第一个</li>

            <li>我是第一个</li>        </ul>    </div></div>