使用jQuery构建类似Facebook的类别选择器

我正在尝试构建一个类别选择器，如

你可以找到我的尝试，但3次点击后脚本变得混乱

HTML

JQUERY

$(document).ready(function() {
$(".cat_click").click(function() {
var $this=$(this);
var id=$this.attr("id");

if($this.hasClass("is_off")){
$(".is_out").slideToggle();
$(".is_out").removeClass("is_out");
$this.slideToggle();

$this.addClass("is_out");
var id2="#" + id + "_input";
$(id2).slideToggle();
}
  });
});

如果需要悬停操作，只需更改。单击以。悬停：

HTML示例：

<div id="categories">                   
    <div  class="dropbox">
        <div id="books" class="box">
            <img src="http://img402.imageshack.us/img402/7231/docp.png" alt="Book" />
            <h2>Books</h2>
        </div>                        
        <div id="books_input" class="box desc">
            Some books
        </div>
    </div>
    <!-- ... -->

---

谢谢罗克逊，这就是我要找的。工作实例：我很高兴听到这个@弗朗索瓦，你介意接受我的回答来回报我的帮助吗？完成！我刚刚意识到这是一种联系。再次感谢。嘿嘿，现在你知道了。如果您看到蓝色文本。。。这是一个链接；也谢谢你。快乐编码！

$(document).ready(function() {
$(".cat_click").click(function() {
var $this=$(this);
var id=$this.attr("id");

if($this.hasClass("is_off")){
$(".is_out").slideToggle();
$(".is_out").removeClass("is_out");
$this.slideToggle();

$this.addClass("is_out");
var id2="#" + id + "_input";
$(id2).slideToggle();
}
  });
});

var boxH = $('.box').outerHeight(true);  // get box height (+ padds. & margs.)

$('.dropbox').click(function(){
  $('.opened').stop().animate({top:0},500).removeClass('opened'); // if there's opened boxes
  $(this).find('.box').addClass('opened').stop().animate({top: -boxH},500); // now, the clicked one!     
});

<div id="categories">                   
    <div  class="dropbox">
        <div id="books" class="box">
            <img src="http://img402.imageshack.us/img402/7231/docp.png" alt="Book" />
            <h2>Books</h2>
        </div>                        
        <div id="books_input" class="box desc">
            Some books
        </div>
    </div>
    <!-- ... -->

body{
    background:#fff;
    font-family:Arial, sans-serif;
}
#categories{
    position:relative;
    margin:0 auto;
    width:557px;height:557px;
}
.dropbox{
    background:#fff;
    position:relative;
    overflow:hidden;
    float:left;
    width:250px;
    height:250px;
    margin:10px;
    border:4px solid #e6e6e6;
}
.box{
    background:#eee;
    position:relative;
    overflow:hidden;
    z-index:2;
    float:left;
    width:200px;
    height:200px;
    margin:5px;
    padding:20px;
    text-align:center;
}
.box img{
    width:128px;
    height:128px;
}
.box h2{
    font-size:34px;
    color:#aaa;
    text-shadow: 1px 2px 2px #fff;
}
.desc{
    text-align:left;
}