<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>初試jq</title>
????<style>
????????*{
????????????padding:?0;
????????????margin:?0;
????????}
????????a{
????????????/*text-decoration:?none;*/
????????????color:?#666666;
????????}
????????#box{
????????????width:?470px;
????????????height:?170px;
????????????background-color:?#CCCCCC;
????????????border:?1px?solid?#626262;
????????????margin:?30px?auto;
????????????position:?relative;
????????}
????????#box?ul{
????????????list-style:?none;
????????????padding:?10px;
????????}
????????#box?ul?li{
????????????float:?left;
????????????width:?100px;
????????????text-align:?center;
????????????margin-right:?50px;
????????????margin-top:?10px;
????????}
????????.showmore{
????????????position:?absolute;
????????????text-align:?center;
????????????width:?150px;
????????????height:?25px;
????????????background-color:?orange;
????????????padding:?5px;
????????????top:?170px;
????????????left:?130px;
????????}
????????.showmore?a{
????????????line-height:?25px;
????????}
????</style>
????<script?src="jquery-3.1.1.js"></script>
????<script>
????????$(function(){
????????????var?$toggleBtn=$('.showmore>a');
????????????$toggleBtn.toggle(function(){
????????????????alert('1');
????????????????},function(){
????????????????alert('2');
????????????});??????????
????????})
????</script>
</head>
<body>
<div?id="box">
????<ul>
????????<li><a?href="JavaScript:">佳能</a></li>
????????<li><a?href="JavaScript:">索尼</a></li>
????????<li><a?href="JavaScript:">三星</a></li>
????????<li><a?href="JavaScript:">尼康</a></li>
????????<li><a?href="JavaScript:">松下</a></li>
????????<li><a?href="JavaScript:">casio</a></li>
????????<li><a?href="JavaScript:">fox</a></li>
????????<li><a?href="JavaScript:">柯達</a></li>
????????<li><a?href="JavaScript:">賓得</a></li>
????????<li><a?href="JavaScript:">理光</a></li>
????????<li><a?href="JavaScript:">奧林巴斯</a></li>
????????<li><a?href="JavaScript:">明基</a></li>
????????<li><a?href="JavaScript:">愛國者</a></li>
????????<li><a?href="JavaScript:">其他品牌相機</a></li>
????</ul>
????<div?class='showmore'>
????????<a?href="JavaScript:"><span>顯示全部品牌</span></a>
????</div>
</div>
</body>
</html>我想測試的是toggle方法的切換功能 就是點一下$toggleBtn然后彈出1，再點一下彈出2； 但為什么無緣無故我的.showmore里面的a標簽的display成了none了啊？？？？
關于toggle問題
Ni14
2017-01-18 21:38:10
