Question

我有两个不同的内联列表。当切换到响应模式时，两个菜单栏在单个按钮中折叠。可能吗。请提出任何想法或解决方案。

这是我的代码

     <header>
            <div class="header_menu_1">
                <ul id="menu">
                    <li><a href="#">1233434</a></li>
                    <li><a href="#">1233434</a></li>
                    <li><a href="#">1233434</a></li>
                    <li><a href="#">1233434</a></li>
                    <li><a href="#">1233434</i></a></li>                   
                </ul>
            </div>
            <div class="container">
                <div class="logo">
                    <img src="logo.png" alt="logo" />
                </div>
                 <div class="header_menu_2">
                     <ul>
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Homes</a></li>
                      </ul>
                </div>
            </div>
        </header>

Answer 1

您是否正在寻找this

之类的内容

JS：

var $tempData = $(".header_menu_1 ul").html();
var $tempData2 = $(".header_menu_2 ul").html();
$(window).resize(function(){
    if($(document).width() < 321){
        $(".header_menu_1 ul").html($tempData+$tempData2);
        $(".header_menu_2 ul").hide();
    }else{
        $(".header_menu_2 ul").html($tempData2);
         $(".header_menu_1 ul").html($tempData);
        $(".header_menu_2 ul").show();
    }
})

当它响应时，两个不同的菜单栏在单个菜单栏中崩溃

1 个答案: