<!DOCTYPE html><html>??? <head>??????? <title>sele1,sele2,seleN選擇器</title>??????? <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>?? ??????? <meta charset="utf-8"><style>div{??? margin: 10px 0px;??? border: solid 1px #ccc;??? width: 280px;}ul{??? list-style-type: none;??? padding: 5px;??? margin: 0px;??? display: none;}li{??? margin: 3px;}h4{??? background-color: #eee;??? padding: 5px;??? margin: 0px;??? height: 23px;??? line-height: 23px;}.fl{??? float: left;}.fr{??? float: right;}</style> ? ??? </head>??? <body>??? <h3>toggle()方法的動畫切換效果</h3>??????? <div>??????????? <h4>?????????????? <span class="fl">我喜歡吃的水果</span>?????????????? <span class="fr" id="spnTip">顯示</span>??????????? </h4>??????????? <ul>??????????????? <li>蘋果</li>??????????????? <li>甘桔</li>??????????????? <li>梨</li>??????????? </ul>??????? </div>?????? ???????? <script type="text/javascript">?????? ??? ?$(function(){?? ??? ??? ??? ?var $span = $("spanTip")?? ??? ??? ??? ?$("h4").bind("click",function(){?? ??? ??? ??? ??? ?$("ul").toggle(300,function(){?? ??? ??? ??? ??? ??? ?$span.html() == "隱藏" ? $span.html("顯示") : $span.html("隱藏");?? ??? ??? ??? ??? ??? ?});?? ??? ??? ??? ??? ?});?? ??? ??? ??? ?});?? ??? ?</script>????? </body></html>
1 回答
- 1 回答
- 0 關注
- 1122 瀏覽
添加回答
舉報
0/150
提交
取消