我需要像这样响应按钮:我们在一个菜单上有 15 个按钮。当浏览器调整大小时,一些按钮添加<select>
如下:
我有这个 jsFiddle来演示这个问题:
我需要像这样响应按钮:我们在一个菜单上有 15 个按钮。当浏览器调整大小时,一些按钮添加<select>
如下:
我有这个 jsFiddle来演示这个问题:
您可以使用它$(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();
});
});
调整窗口大小时,这是太多的操作。我不知道这是否可以用 CSS 完成。你应该更喜欢那个..
但这是一个使用 Javascript/jQuery 的有效但肮脏的小提琴。你应该听听这个resize
事件。
$(document).ready(function (event) {
buildMenu();
$(window).resize(function (event) {
buildMenu();
});
});
反过来做,更灵活,所以,默认情况是下拉菜单。
在javascript中监听窗口调整大小事件,在调整大小时,测量宽度可用,开始从菜单中的下拉菜单中放置选项,直到它比屏幕宽,删除最后一项,完成。
您可以给每个按钮和重复选项一个类,然后使用媒体查询来显示和隐藏您希望显示的那些,从而将 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;
}
}