js实现菜单的收缩与展开

 

tab.js中的菜单收缩与展开函数

function showx(type_)
{
    var flag=document.getElementById('div_menu_'+(type_+1)).style.display;
    for(var j=0;j<3;j++)
    {
        document.getElementById('div_menu_1').style.display='none';
        document.getElementById('div_menu_2').style.display='none';
        document.getElementById('div_menu_3').style.display='none';
        document.getElementById('div_menu_4').style.display='none';
        document.getElementById('td_menu1').className='div_img_bgxz';
        document.getElementById('td_menu2').className='div_img_bgxz';
        document.getElementById('td_menu3').className='div_img_bgxz';
        document.getElementById('td_menu4').className='div_img_bgxz';
    }
    if(flag=="block"||flag=="")
    {
        document.getElementById('div_menu_'+(type_+1)).style.display='none';
    }
    else
    {
        document.getElementById('div_menu_'+(type_+1)).style.display='block';
    }

 //   document.getElementById('div_menu_'+(type_+1)).style.display='block';
    document.getElementById('td_menu'+(type_+1)).className='div_img_left';
    document.body.focus();
}

html页面

<script type="text/javascript" src="js/tab.js"></script></head>

<div id="content_right">
<div class="content_right1">
<div class="content_right1_title">项目信息公开</div>
<div class="content_right1_nr">
<div class="div_img_left" id="td_menu1" οnclick="showx(0);"><span></span>项目审批信息</div>
<div class="content_right1_nr2" id="div_menu_1">
<ul>
<li><a href="#">用地批复文件结果信息</a></li>
<li><a href="#">环境影响评价审批的结果信息</a></li>
<li><a href="#">项目核准信息</a></li>
</ul>
</div>
<div class="div_img_bgxz" id="td_menu2" οnclick="showx(1);"><span></span>项目建设管理信息</div>
<div class="content_right1_nr2" id="div_menu_2" style="display:none">
<ul>
<li><a href="#">项目基本信息</a></li>
<li><a href="#">项目招标投标信息</a></li>
<li><a href="#">项目用地审批信息</a></li>
</ul>
</div>
<div class="div_img_bgxz" id="td_menu3" οnclick="showx(2);"><span></span>从业单位、个人信息</div>
<div class="content_right1_nr2" id="div_menu_3" style="display:none">
<ul>
<li><a href="#">从业单位良好行为记录信息</a></li>
<li><a href="#">从业单位不良行为记录信息</a></li>
</ul>
</div>
<div class="div_img_bgxz" id="td_menu4" οnclick="showx(3);"><span></span>地矿审批、出让信息</div>
<div class="content_right1_nr2" id="div_menu_4" style="display:none">
<ul>
<li><a href="#">土地招标拍卖挂牌出让信息</a></li>
<li><a href="#">国有建设用地使用权出让结果信息</a></li>
<li><a href="#">建设用地审批信息</a></li>
<li><a href="#">探矿权审批信息</a></li>
</ul>
</div>
</div>
</div>