javascript - JQuery 将监听事件添加到 .ressized() 然后附加 DIV's

Question

在我正在构建的管理面板上，右侧有一个快速访问侧面板，可以使用 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();
    }
});

Answer 1

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)。删除“更多”下拉选项卡

我不确定我是否需要这个，但是当只剩下一个附加选项卡时，您需要重复上述操作并简单地隐藏/显示“更多”选项卡。