Question

我想让 UL 菜单响应。对于PC，它应该是 UL ，对于移动设备应该是 SELECT ，具体取决于它应该转换的Widnow宽度。我几乎做了，但我有一个问题：

当从大分辨率调整为小（<700px）时，它会正常工作，但当窗口调整为大调时，下拉 UL 将消失。

这是JS：

function responsive(mainNavigation) {
var $ = jQuery;
var screenRes = $('.body_wrap').width();

if (screenRes < 700) {                    
    /* Replace unordered list with a "select" element to be populated with options, and create a variable to select our new empty option menu */
    $('.topmenu').html('<select class="select_topmenu" id="topm-select"></select>');
    var selectMenu = $('#topm-select');

    /* Navigate our nav clone for information needed to populate options */
    $(mainNavigation).children('ul').children('li').each(function () {

        /* Get top-level link and text */
        var href = $(this).children('a').attr('href');
        var text = $(this).children('a').text();

        /* Append this option to our "select" */
        if ($(this).is(".current-menu-item") && href != '#') {
            $(selectMenu).append('<option value="' + href + '" selected>' + text + '</option>');
        } else if (href == '#') {
            $(selectMenu).append('<option value="' + href + '" disabled="disabled">' + text + '</option>');
        } else {
            $(selectMenu).append('<option value="' + href + '">' + text + '</option>');
        }

        /* Check for "children" and navigate for more options if they exist */
        if ($(this).children('ul').length > 0) {
            $(this).children('ul').children('li').each(function () {

                /* Get child-level link and text */
                var href2 = $(this).children('a').attr('href');
                var text2 = $(this).children('a').text();

                /* Append this option to our "select" */
                if ($(this).is(".current-menu-item") && href2 != '#') {
                    $(selectMenu).append('<option value="'+href2+'" selected> - '+text2+'</option>');
                } else if (href2 == '#') {
                    $(selectMenu).append('<option value="'+href2+'" disabled="disabled"># '+text2+'</option>');
                } else {
                    $(selectMenu).append('<option value="'+href2+'"> - '+text2+'</option>');
                }

                /* Check for "children" and navigate for more options if they exist */
                if ($(this).children('ul').length > 0) {
                    $(this).children('ul').children('li').each(function () {

                        /* Get child-level link and text */
                        var href3 = $(this).children('a').attr('href');
                        var text3 = $(this).children('a').text();

                        /* Append this option to our "select" */
                        if ($(this).is(".current-menu-item")) {
                            $(selectMenu).append('<option value="' + href3 + '" class="select-current" selected> -- ' + text3 + '</option>');
                        } else {
                            $(selectMenu).append('<option value="' + href3 + '"> -- ' + text3 + '</option>');
                        }

                    });
                }
            });
        }
    });
} else {
    $('#topm-select').css('display', 'none');       
}

/* When our select menu is changed, change the window location to match the value of the selected option. */
$(selectMenu).change(function () {
    location = this.options[this.selectedIndex].value;
});}
jQuery(document).ready(function($) {            

var screenRes = $('.body_wrap').width();

/* topmenu replace to select */
var mainNavigation = $('.topmenu').clone();
responsive(mainNavigation);
/* reload topmenu on Resize */
$(window).resize(function() {       
    var screenRes = $('.body_wrap').width();
    responsive(mainNavigation);
});  });

以下是DEMO：http://jsfiddle.net/nJ5b5/1/

（查看结果使结果框变大/变小）

Answer 1

我已经更改了你的代码，因此它不会创建选择每个调整大小但仅在尚未创建时显示ul并且如果＆gt; = 700则显示ul并且在＆lt;时显示选择700。

if ($('.topmenu select').length == 0) { 
...
}

if(screenRes >= 700){
    $('.topmenu select:first').hide();
    $('.topmenu ul:first').show();      
}else{
    $('.topmenu ul:first').hide();
    $('.topmenu select:first').show();             
}

http://jsfiddle.net/Qjebm/4/

<ul>替换为<select>并返回窗口调整大小</select> </ul>

1 个答案: