我需要像这样的响应按钮:
我们在菜单上有15个按钮。当浏览器调整大小时,某些按钮会添加到<select>
像这样:
我有this jsFiddle来证明问题:
答案 0 :(得分: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();
});
});
答案 1 :(得分:3)
调整窗口大小时,操作过多。我不知道这是否可以用CSS完成。你应该更喜欢..
但这是一个有效但又脏的fiddle with Javascript/jQuery。
你应该听resize
事件。
$(document).ready(function (event) {
buildMenu();
$(window).resize(function (event) {
buildMenu();
});
});
答案 2 :(得分:1)
反过来说,它更灵活,因此,默认情况是下拉菜单。
在javascript中听窗口调整大小事件,在调整大小时,测量可用宽度,从菜单下拉菜单开始放置选项,直到它比屏幕宽,删除最后一项,完成。
答案 3 :(得分: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;
}
}