隐藏列表并通过单击其标题显示它

时间:2012-06-24 18:44:51

标签: javascript show-hide

我一直在研究一个比我更先进的开发人员传给我的东西。 (尽管他的拼写不是很好)。我要做的是使它在点击主要类别时,隐藏或显示下面的列表。但最初是隐藏的。

他的代码将它们全部显示在一个整体框中,成功隐藏并在单击时显示。所以这是一个框内的类别列表。如果这是有道理的。 (有点像yipit.com左边的方框 - 点击标题会使其下方的链接显示/消失)。所以这是他的代码:

<!-- Box2 -->
    <div class="clsBox clsTags" id="catgories_list">
        <!-- Box Title -->
        <div class="clsBox_Tiitt">
            <a href="javascript:void(0)">Categories</a>
        </div>
        <!-- End of Box Title -->
        <!-- Box content -->
        <div class="clsBox_Cont">
            <p class="clsBoxoption"><a href="javascript:void(0)" id="sel_my_tags">My Tags</a> | <a href="javascript:void(0)" id="clear_all_tag">Clear</a> | <a id="save_tags" href="javascript:void(0)">Save</a></p>
            <a href="javascript:void(0)" id="sel_all_tags" style="color:#fff; font-size:16px; font-weight:bold;">Select All</a>
            <?php
                if(isset($users_category))
                {
                    $mytags=implode(",",$users_category);
                    echo '<input type="hidden" name="my_tags" value="'.$mytags.'" id="my_tags"/>';
                }

                $sub_cat_query='';

                $sub_cats=array();

                $sub_categories=array();

                $conditions=array();

                $output="";

                $checked='';

                if(isset($categories))
                {
                    foreach($categories as $category)
                    {
                        $output.='<div class="clsTags_Cont">
                                    <h3>'.ucfirst($category->name).'</h3>
                                    <ul id="sub_cat_of_'.$category->id.'">';
                        $conditions=array("parent_id"=>$category->id,"status"=>'1');

                        $sub_cat_query=$this->common_model->getTableData("sub_category",$conditions);

                        $sub_categories=$sub_cat_query->result();

                        foreach($sub_categories as $sub_category)
                        {
                            if(count($users_category)!=0)
                            {   
                                if(in_array($sub_category->id,$users_category))
                                    $checked='checked="checked"';
                                else
                                    $checked='';
                            }
                            else
                                $checked='';

                            $output.='<li><label><input type="checkbox" id="check_box_cat'.$category->id.'_'.$sub_category->id.'" name="check_box_cat[]" value="'.$sub_category->id.'" '.$checked.'>&nbsp;'.ucfirst($sub_category->name).'</label></li>';
                        }
                        $output.="<div class='clear'></div></ul></div>";
                    }
                }
                echo $output;
            ?>
        </div>
        <!-- box Content -->
    </div>
    <!-- End of Box2 -->

我相信他用于转换的代码是:

$(".clsBox .clsBox_Tiitt").click(function(){
    var cur_id=$(this).parent().attr("id");
    $("#"+cur_id+" .clsBox_Cont").toggle();
    var class_name=$("#"+cur_id+" .clsBox_Tiitt").attr("class");
    if(class_name=="clsBox_Tiitt")
        $("#"+cur_id+" .clsBox_Tiitt").addClass("clsClsoe");
    else
        $("#"+cur_id+" .clsBox_Tiitt").removeClass("clsClsoe");
})

但是,呃,我不知道如何过渡。我知道我需要调整的位是

$output.='<div class="clsTags_Cont">
                                    <h3>'.ucfirst($category->name).'</h3>
                                    <ul id="sub_cat_of_'.$category->id.'">';

我想我必须在前面放一个特殊div,在ul位之前放一个内部div类,然后在输出处关闭它。

但是我有点不知所措,以便实际隐藏/显示位出现并消失。

这有意义吗?希望我有意义。如果有人能指导我,我真的很感激帮助。我总是在学习! :)非常感谢提前。

0 个答案:

没有答案