Question

嗨，大家好，我的下拉菜单嵌套在手风琴里面有问题。请注意，菜单在电话等小型显示屏中可见。

现在下拉菜单的功能是当你点击它时，它会完美地启动，但它会推动它旁边的其他链接，其次当你点击页面的不同区域时下拉不会关闭，最后当下拉列表处于活动状态时，然后单击其他下拉链接，它会自动转到该下拉列表中的第一个链接

这是html：

<div id="accordion" class="col-xs-12 col-sm-12 hidden-md hidden-lg">
<div class="accordion-toggle text-center">
    <div class="bars"></div>
    <div class="bars"></div>
    <div class="bars"></div>
</div>
<div class="accordion-content test_dd_fix">
    <ul class="list-inline">
        <volist name="category_tree" id="vo1">  
            <li class="nav_li">
                <a <if condition="$vo1[id]==43 || $vo1[id]==22">
                    style="color:red"
                    <else /></if>class="" href="{:U('Goods/index?category_id='.$vo1['id'])}">{$vo1.title}
                </a>
                <notempty name="vo1._child">
                <div class="nav_erji">
                    <div class="nav_erji_dropdown" >
                            <volist name="vo1._child" id="vo2">
                                <div class="nav_erji_div">
                                    <h4><a href="{:U('Goods/index?category_id='.$vo2['id'])}">{$vo2.title}</a></h4>
                                    <notempty name="vo2._child">
                                        <ul class="list-inline">
                                            <volist name="vo2._child" id="vo3">
                                                <li><a href="{:U('Goods/index?category_id='.$vo3['id'])}">{$vo3.title}</a></li>
                                            </volist>
                                        </ul>
                                    </notempty>
                                </div>
                            </volist>
                        <div>
                        <volist name="category_adv" id="vo">
                            <switch name="vo.target_type">
                                <case value="1">
                                    <a class="font_shift" href="{$vo.target_data}" target="_blank">
                                        <div class="nav_ad_pic"><img src="{$vo.cover_pc}"/></div>
                                        <h2>{$vo.title}</h2>
                                    </a>
                                </case>
                                <case value="2">
                                    <a href="{:U('Goods/detail?id='.$vo['target_data'])}" target="_blank">
                                        <div class="nav_ad_pic"><img src="{$vo.cover_pc}"/></div>
                                        <h2>{$vo.title}</h2>
                                    </a>
                                </case>
                                <case value="3">
                                    <a href="{:U('Goods/index?category_id='.$vo['target_data'])}" target="_blank">
                                        <div class="nav_ad_pic"><img src="{$vo.cover_pc}"/></div>
                                        <h2>{$vo.title}</h2>
                                    </a>
                                </case>
                                <case value="4">
                                    <a href="{:U('Article/detail?id='.$vo['target_data'])}" target="_blank">
                                        <div class="nav_ad_pic"><img src="{$vo.cover_pc}"/></div>
                                        <h2>{$vo.title}</h2>
                                    </a>
                                </case>
                            </switch>
                        </volist>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </notempty>
        </li>
        </volist>
    </ul>

    <ul>
        <li>
            <a href="{:U('Goods/brands')}" class="nav_1">Shop By Brands</a>
        </li>
    </ul>

这是css：

.nav_erji_dropdown {background-color:#000; position: absolute !important ;z-index: 1000 !important;}
.nav1{position:relative;background:#fff;}
.nav1 .nav_li{float:left;color:#ffffff;}
.nav1 .nav_li .nav_1{display:block;color:#ffffff;margin-right:30px;height:55px;line-height:55px;font-size:14px;margin-bottom:-2px;}
.nav1 .active .nav_1{border-bottom:2px solid #EDCC27}
.test_dd_fix {overflow: visible !important; }
.nav1_erji{position:relative;top:57px;left:0px;right:0px;background:#fff;display:none;}
.nav1_erji.active {display:block;}
.nav1_erji .wra1{margin:20px auto;}
.nav1_erji_div{float:left;width:240px;padding-right:100px;}
.nav1_erji_div h4{font-size:14px;font-weight:normal;height:30px;line-height:30px;padding-bottom:10px;margin-bottom:10px;}
.nav1 .nav1_li .nav1_erji_div ul li a{height:30px;line-height:30px;border:none;padding:0px;font-size:12px;}

到目前为止，这是我添加的唯一的javascript

<script type="text/javascript">
  $(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');

    });
  });
</script>

它有很多问题，但如果我们能够解决这个问题我真的很感激，谢谢你们！

自定义下拉菜单不会因点击和其他多个问题而关闭

0 个答案: