首页 新闻 会员 周边

关于jq slideUp的

0
悬赏园豆：5 [已解决问题] 解决于 2015-07-14 13:04

自己学了点jq，想写一个下拉导航，用了smarty，如果影响阅读的话就只看jq代码吧。bcg是我下拉的一个背景色，想实现的效果是这样的，这样写会出现了个bug。bcg在slideUp的过程中用户有移到了 yiji li 里，这时show方法相当于没用，结果会出现没有背景色的状况，求解决。。。。

        <div class="dh f_l">
            <ul class="yiji">
            {foreach from=$dh item=v key=y}
                <li class="f_l {if $url == $v.url}on{/if}">
                    {if $url != $v.url}
                    <a href="{$v.url}">{$v.name}</a>
                    {else}{$v.aa}{/if}    

                    <div class="bcg"></div> 
                    <ul class="erji">
                        {foreach from=$fen.$y item=g name=gg}
                            <img src="{$v.img}">
                            <li><a href="{$g.url}">{$g.name}</a></li>    
                        {/foreach}
                    </ul>    
                </li>
            {/foreach}  
            </ul>
            <div class="clear"></div>
        </div>

        <script>        
        {literal}
            $('.yiji').hover(                    
                function(){},
                function(){
                    $(this).find('.bcg').slideUp();
                    $(this).find('.erji').slideUp();
                }

            );

            $(".yiji li").hover(
                function(){
                    $(this).find('.erji').show();
                     $(this).find('.bcg').show();
                },
                function(){
                    $(this).find('.erji').hide();

                });
        {/literal}
        </script>

被绑票的粽子的主页 被绑票的粽子 | 初学一级 | 园豆：197
提问于：2015-07-12 12:35
< >
分享
最佳答案
0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery下拉菜单</title>
<style type="text/css">
/*简单重构*/
*{margin:0;padding:0}
ul,li{list-style:none}
.clearfix{*zoom:1}
.clearfix:after{content:"";clear:both;display:table;height:0;font-size:0;overflow:hidden}

/*导航开始*/
.yiji{ width:990px; margin:0 auto}
.yiji .f_l{float:left;width:100px;height:30px; position:relative;/*用于限制子级*/}
/*背景*/
.bcg{position:absolute;left:0;top:30px;width:100px;height:300px;display:none; background:#000;filter:alpha(opacity=60);opacity:0.6}
/*下拉内容*/
.erji{ position:absolute;left:0;top:30px;width:100px;height:300px;display:none; }
</style>
</head>

<body>
<div class="dh f_l">
            <ul class="yiji clearfix">
                <li class="f_l ">
                    <a href="{$v.url}">{$v.name}</a>
                    <div class="bcg"></div> 
                    <ul class="erji">
                   随便打几个字，自己修改
                    </ul>    
                </li>
            </ul>
        </div>
        
        
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
    var $li=$('.yiji .f_l');
    $li.on({
        mouseover:function(){//滑过显示
            $(this).find('.bcg,.erji').show(300);
            },
    mouseleave:function(){//离开时隐藏，可切换成fadeOut,slideUp等
        $(this).find('.bcg,.erji').hide(300);
        }});
});
</script>
<!--三级下拉菜单源码：http://www.yilingsj.com/jquery/2013-10-16/93.html-->
</body>
</html>

楼主复制代码到本地保存运行即可看效果。

收获园豆：5
繁华已逝 | 菜鸟二级 |园豆：353 | 2015-07-14 00:17

我已经解决了，用了另外种方法，这代码我晚上再看，先谢谢了~

被绑票的粽子 | 园豆：197 (初学一级) | 2015-07-14 13:04
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。