我一直在研究一个比我更高级的开发人员传给我的东西。(尽管他不擅长拼写)。我想要做的是,当点击一个主要类别时,它下面的列表会隐藏或显示。但最初是隐藏的。
他的代码将它们全部显示在一个整体框中,单击时成功隐藏并显示。所以这是一个框内的类别列表。如果这是有道理的。(有点像 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.'> '.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 类,然后在输出处将其关闭。
但是我有点不知所措,因为我将如何做到这一点,以便实际的隐藏/显示位出现和消失。
这有意义吗?希望我说得通。如果有人可以指导我,我将非常感谢您的帮助。我一直在学习!:) 首先十分感谢。