织梦dedecms产品页折叠菜单如何实现默认展开

92建站   织梦CMS   2021-03-17   收藏本文

本文介绍了织梦dedecms产品页折叠菜单如何实现默认展开,解决思路:使用CSS控制样式,使用JS控制切换效果,就可以实现织梦折叠菜单展开的功能了。教程给出了代码,直接套在模板里面使用就可以了。

织梦制作产品栏时,有一级栏和二级栏,一般喜欢折叠效果!什么?但是,点击进入的话,默认情况下会关闭!怎样才能默认打开呢?92建站提供方面的标签和js!这只是一个实例,没有折叠效果。

 <script>
   $(document).ready(function () {
        openoff('#part2_{dede:field.id/}');
        openoff('#part2_{dede:field.reid/}');
    })
   function openoff(obj){
       $(obj).next("dd").css("display","block");
       $(obj).addClass("launched");
   }
   </script>

<div class="menu" id="sidebar" data-csnow="2" data-class3="0" data-jsok="2"> {dede:channelartlist typeid=27}
  <dl class="list-none navnow">
    <dt id='part2_{dede:field name="id"/}' ><a href='{dede:field name="typeurl"/}'  title='{dede:field name="typename"/}' ><span>{dede:field name="typename"/}</span></a></dt>
    <dd class="sub" style="display:none;"> {dede:channel type='son' noself='yes'}
      <h4 id='part3_[field:id/]'><a href="[field:typedir function="str_replace('{cmspath}','',@me)"/]"  title='[field:typename /]' class='nav'><span>[field:typename /]</span></a></h4>
      {/dede:channel}  </dd>
  </dl>
  {/dede:channelartlist}
  <div class="clear"></div>
</div>

  <Style type="text/css">
    .launched{background-image:url(/skin/images/nav_hover.jpg);color: #d5b687;}
     .list-none{ list-style:none; padding:0px; margin:0px;}
    .menu dl{ margin-top:5px; }
    .menu dt{cursor: pointer;margin-top: 10px;font-weight: bold;font-size: 16px;font-family: "微软雅黑";color: #0d2180;line-height: 53px;padding-left: 48px;
background: url(/skin/images/nav.jpg) no-repeat;}
    .menu h4 a{ display: block;width: 200px;height: 28px;font-family: "微软雅黑";text-align: center;font-size: 14px;line-height: 28px;color: #333; }
    .menu h4 span{ display: block;width: 200px;height: 28px; font-weight:100;font-family: "微软雅黑";text-align: center;font-size: 14px;line-height: 28px;color: #333; }
    .menu h4 a:hover{color: #fff;background-color: #d5b687;}
</Style>

上面就是织梦折叠菜单展开的介绍,若有疑问可以找小编进一步探讨交流~

旺铺招租1 旺铺招租2 旺铺招租3 旺铺招租4 旺铺招租5 旺铺招租6
展开