一个简单的jQuery问题，click后没有反应？？怎么办

<div  id="q">
<p  id="a">
<span>1</span> <span>2</span> <span>3</span> <span>4</span>
<span>5</span> <span>6</span> <span>7</span> <span>8</span>
<span>9</span> <span>10</span> <span>11</span> span>12</span>
<span>13</span> <span>14</span> <span>15</span> <span>16</span> <span>17</span> <span>18</span> <span>19</span> <span>20</span> <span>21</span>
</p>
<p  id="b">显示</p>
</div>

<style>
    #q{
        border:1px red solid;
        width:300px;
        }
    #a{
        column-count:3;
        column-width:80px;
        column-gap:10px;
        width:300px;
        height:100px;//！！！！！！
        overflow:hidden;//!！！！！！
        line-height:30px;
        border:0px red solid;
        margin:0px;
        }
    span:not(#b){
        border:1px red solid;    
        margin:10px 10px;    
        }    
    #b{
            column-span:all;
            margin:10px 50px;
            border:1px black solid;
            text-align:center;        
            }
    </style>

下面是jQuery部分：

$("#b").click(function(){
        $("#a").height()==100?$("#a").removeAttr("height"):$("#a").height(100);
        })
希望多次点击“显示”，内容不断切换显示和隐藏(部分隐藏)状态，        

现在问题是当点击"显示"，没有反应？？求大神给招
下面是截图：

---

两点：
1.height不是元素的attr，而是css里面的一个样式。所以应该用css("height",0)，而不是用removeAttr
2.只是设置height为0，是不会把内部元素隐藏起来的，虽然容器高度为0了，但是子元素依然可见，如果想通过控制父容器的高度来隐藏子元素，需要给#a加一个样式overflow:hidden，这样才能在容器高度为0的情况下，隐藏超出容器可见范围的子元素。

---

对，用toggle，可以实现隐藏和显示的效果

---

1. 控制元素的height属性，只会影响其后续元素的布局；其内部子元素依然可见

2. 控制元素的可见性，请使用display这个CSS属性

---

jQuery有原生支持的toggle方法

$("#b").click(function() {
    $("#a").toggle()
})

---

你的jquery代码有问题，我们并不能通过removeAttr('height')来控制显示和隐藏，可以像下面这样改。

$("#b").click(function(){
    //$("#a").height()==100?$("#a").removeAttr("height"):$("#a").height(100);
    $("#a").is(':hidden')? $("#a").show():$("#a").hide();
})