超级简单的js实现点击显示或点击隐藏,代码精简,嵌入方便

<style type="text/css"> 
  #sub_menu_1,#sub_menu_2{ 
   display: none; 
  } 
  ul li:hover{ 
   cursor: pointer; 
  } 
  
  
  
  
  .sortlist{ float:left; width:25%; text-align:center; background:#8EBA3E; padding:6px 1%; color:#FFF; margin:3%; border-radius:6px;}
  .sortlist a{ color:#FFF;}
  
 </style> 
 <script type="text/javascript"> 
  function f(str){ 
    var sub_menu = document.getElementById(str); 
    var dis_v = sub_menu.style.display; 
     
    if(dis_v == "block") 
     sub_menu.style.display = "none"; 
    else 
     sub_menu.style.display = "block"; 
      
   } 
   
 </script> 
==========================================================================
<a href="#"><i class="icon-details fr" onclick = "f('sub_menu_1')">分类</i></a>

说明:上面的   onclick = "f('sub_menu_1')" 放入任何要点击实现的地方即可  数字1可以改2实现多处响应


 <ul id="sub_menu_1"> 
    <li class="sortlist">二级餐单1</li> 
    <li>二级餐单1</li> 
    <li>二级餐单1</li> 
    <li>二级餐单1</li> 
   </ul>

另一个参考样式,

<div>
    <dt class="jotitle">
        <span>{$vo.name}</span>
        <span class="desContr hand" key="{$key}">></span>
    </dt>
    <dd class="joconten desEffc bb{$key}">
    <dl class="j_15">
        <dt class="j_t">
            岗位描述
        </dt> {$vo.description}
    </dl>
</div>

.desEffc {
    display:none;
}

$('.desContr').click(function() {
    var key = $(this).attr('key');
    var str = '.bb' + key;
    $(str).toggleClass('desEffc');
})