在我正在构建的管理面板上,右侧有一个快速访问侧面板,可以使用 JQuery 调整大小功能调整其大小,请参见下文;
$('.Quick-Sidebar').resizable({
handles: 'w',
minWidth: 300,
maxWidth: 650
});
它的顶部有一个菜单,在页面加载时看起来像下面的代码片段;
<ul class="nav nav-tabs">
<li class="active">
<a href="javascript:;" data-target="#quick_sidebar_tab_1" data-toggle="tab" aria-expanded="false">
Staff
</a>
</li>
<li>
<a href="javascript:;" data-target="#quick_sidebar_tab_2" data-toggle="tab" aria-expanded="false">
Messages
<span class="badge badge-success">7</span>
</a>
</li>
// APPEND LI TO/FROM HERE
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
More
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu" style="display:none">
// APPEND TO/FROM FIRST LI FROM BELOW
<li>
<a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
<i class="fa fa-bell-o"> </i> Alerts </a>
</li>
<li>
<a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
<i class="fa fa-info-circle"> </i> Notifications </a>
</li>
<li class="divider"></li>
<li>
<a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab" aria-expanded="true">
<i class="fa fa-cog"></i> Settings </a>
</li>
</ul>
</li>
</ul>
问题
如何在调整 DIV 大小时添加监听事件。
了解上述内容后,我相信我只需添加一个检查来查看宽度是多少,并在达到一定宽度后,附加 <li>
之一其他地方。
如何附加我的 <li>
往返上述列表的评论区域?
更新
在 Korgrue 的帮助下,我得到了我需要的部分代码,并更新了 live version ;
$('.Quick-Sidebar').bind('resize', function(e) {
if ($(this).width() >= 400) {
alert('Append the menu item');
}
});
更新二
球正在滚动...
$('.Quick-Sidebar').bind('resize', function(e) {
if ($(this).width() >= 400) {
$('.Testing1234').insertBefore('li.dropdown');
$('.Testing1234 i').hide();
}
});
最佳答案
1)。监听要调整的 Div 大小
当管理员将快速访问侧边栏扩展至大于或等于 400 像素时,第一层就有足够的空间显示“警报”选项卡,因此我们需要首先监听;
$('.Quick-Sidebar').bind('resize', function(e) {
if ($(this).width() >= 400) {
// What to do IF the width is greater than or equal to 400px?
}
});
2)。移动“警报”<li>
我给了每个<li>
一个类名,因为我发现这样更容易,尽管你可以数出有多少 <li>
有,减一并称之为。所以我将其移动到宽度达到 400,然后反转,反之亦然;
$('.Quick-Sidebar').bind('resize', function(e) {
if ($(this).width() >= 400) {
$('.QSB-NM-Alerts').insertBefore('li.dropdown');
$('.QSB-NM-Alerts i').hide();
}
if ($(this).width() <= 399) {
$('.QSB-NM-Alerts').insertBefore('ul.dropdown-menu li:first');
$('.QSB-NM-Alerts i').show();
}
});
3)。对所有选项卡选项重复
您可以通过设置间隔、设置 var、检查宽度是否为 var +/- 100px 左右来做到这一点,但是我已经在有足够的可用空间时立即添加一个;
$('.Quick-Sidebar').bind('resize', function(e) {
if ($(this).width() >= 400) {
$('.QSB-NM-Alerts').insertBefore('li.dropdown');
$('.QSB-NM-Alerts i').hide();
}
if ($(this).width() <= 399) {
$('.QSB-NM-Alerts').insertBefore('ul.dropdown-menu li:first');
$('.QSB-NM-Alerts i').show();
}
if ($(this).width() >= 575) {
$('.QSB-NM-Notify').insertBefore('li.dropdown');
$('.QSB-NM-Notify i').hide();
$('.QSB-NM-Divider').hide();
}
if ($(this).width() <= 574) {
$('.QSB-NM-Notify').insertBefore('ul.dropdown-menu .QSB-NM-Divider');
$('.QSB-NM-Notify i').show();
$('.QSB-NM-Divider').show();
}
});
4)。删除“更多”下拉选项卡
我不确定我是否需要这个,但是当只剩下一个附加选项卡时,您需要重复上述操作并简单地隐藏/显示“更多”选项卡。
关于javascript - JQuery 将监听事件添加到 .ressized() 然后附加 DIV's,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37041500/