菜单样式1：鼠标悬停向下弹出列表

Posted 2020-09-26 nobug的世界

 JS部分：

        var qcloud={};

        $(‘[_t_nav]‘).hover(function(){

            var _nav = $(this).attr(‘_t_nav‘);

            clearTimeout( qcloud[ _nav + ‘_timer‘ ] );

            qcloud[ _nav + ‘_timer‘ ] = setTimeout(function(){

            $(‘[_t_nav]‘).each(function(){

            $(this)[ _nav == $(this).attr(‘_t_nav‘) ? ‘addClass‘:‘removeClass‘ ](‘nav-up-selected‘);

            });

            $(‘#‘+_nav).stop(true,true).slideDown(200);

            }, 150);

        },function(){

            var _nav = $(this).attr(‘_t_nav‘);

            clearTimeout( qcloud[ _nav + ‘_timer‘ ] );

            qcloud[ _nav + ‘_timer‘ ] = setTimeout(function(){

            $(‘[_t_nav]‘).removeClass(‘nav-up-selected‘);

            $(‘#‘+_nav).stop(true,true).slideUp(200);

            }, 150); 

        });

html部分：

 

        <c:if test="${fn:contains(AUTH_LIST, MENU_AUTH_XXCX)}">

            <li id="menu-xxgj"><a href="#" _t_nav="xxgj">菜单一</a> </li>

        </c:if>    

<div class="data_merger" id="xxgj"  _t_nav="xxgj">

  <i class="arrow"></i>

  <ul>

    <li>

        <a href="<%=ApplicationContextUtil.getBasePath(request)%>datamerger/test.do">身份录入</a><br>      

    </li>

    <li><a href="<%=ApplicationContextUtil.getBasePath(request)%>datamerger/test.do">信息导入</a></li>

    <li>   

    </li>

  </ul>

</div>