JQuery将监听事件添加到.resizable（）然后追加DIV

Question

在我的管理面板上，我正在构建一个右侧的快速访问侧面板，可以使用JQuery resizeable函数调整大小，见下文;

$('.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');
    }
});

更新II

球正在滚动......

$('.Quick-Sidebar').bind('resize', function(e) {
    if ($(this).width() >= 400) {
        $('.Testing1234').insertBefore('li.dropdown');
        $('.Testing1234 i').hide();
    }
});

Answer 1

1）。聆听要调整大小的部分

管理员将快速访问侧栏扩展到大于或等于400px后，就有足够的空间容纳“警报”。选项卡显示在第一层，所以我们需要先听;

$('.Quick-Sidebar').bind('resize', function(e) {
    if ($(this).width() >= 400) {
        // What to do IF the width is greater than or equal to 400px?
    }
});

2）。移动警报＆＃39; <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）。删除＆＃39;更多＆＃39;下拉选项卡

我不确定我是否需要这个，但是只剩下一个额外的标签，你需要重复上面的内容，只需隐藏/显示“更多”和“更多”标签。标签