2

我需要像这样响应按钮:我们在一个菜单上有 15 个按钮。当浏览器调整大小时,一些按钮添加<select> 如下: 在此处输入图像描述

我有这个 jsFiddle来演示这个问题:

4

4 回答 4

3

您可以使用它$(window).on('resize', function() { ... });来检测蚂蚁宽度的变化并采取相应措施。

这是一个有效的jQuery代码

$(function() {

$("<select />").appendTo($("nav"));

var $select = $('nav select');
$select.hide();

$("<option />", {
    "selected": "selected",
    "value"   : "",
    "text"    : "Go to..."
}).appendTo($select);

$("nav a").each(function() {
    var el = $(this);
    $("<option />", {
        "value"   : el.attr("href"),
        "text"    : el.text()
    }).appendTo($select);
});

$(window).on('resize', function() {
    console.log($(window).width());
    if($(window).width() < 960) {
        $($select).show();
        $('nav ul').hide();
    }
    else if($(window).width() > 960) {
        $($select).hide();
        $('nav ul').show();
    }
});    

$select.change(function() {
    window.location = $(this).find("option:selected").val();
});
});

代码。在此处查看演示:演示

于 2013-05-30T17:28:20.373 回答
3

调整窗口大小时,这是太多的操作。我不知道这是否可以用 CSS 完成。你应该更喜欢那个..

但这是一个使用 Javascript/jQuery 的有效但肮脏的小提琴。你应该听听这个resize事件。

$(document).ready(function (event) {

    buildMenu();
    $(window).resize(function (event) {
        buildMenu();
    });

});
于 2013-05-30T18:42:16.150 回答
1

反过来做,更灵活,所以,默认情况是下拉菜单。

在javascript中监听窗口调整大小事件,在调整大小时,测量宽度可用,开始从菜单中的下拉菜单中放置选项,直到它比屏幕宽,删除最后一项,完成。

于 2013-05-30T17:17:29.090 回答
1

您可以给每个按钮和重复选项一个类,然后使用媒体查询来显示和隐藏您希望显示的那些,从而将 JS 中的逻辑保持在最低限度:

@media (max-width: SIZE-1) {
    li.about-us,
    li.support-1,
    li.support-2,
    li.support-3,
    li.etc {
        display: none;
    }

    option.about-us,
    option.support-1,
    option.support-2,
    option.support-3,
    option.etc {
        display: none;
    }
}
于 2013-05-30T17:39:37.187 回答