Javascript JQuery将侦听事件添加到.resizeable（），然后追加DIV'；s

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

更新二 球正在滚

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

1). 正在侦听要调整大小的Div 当管理员扩展其大于或等于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). 移动“警报”

我给了每个

一个类名，因为我发现这样更容易，尽管你可以计算出有多少

，减去一，然后调用它。因此，我将其移动到宽度达到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();
    }
});

$（'.Quick Sidebar'）.bind（'resize'，函数（e）{
如果（$（this）.width（）>=400）{
$（'.QSB NM Alerts'）.insertBefore（'li.dropdown'）；
$（'.QSB NM警报i'）.hide（）；
}
if（$（this）.width（）1）。正在侦听要调整大小的Div
当管理员扩展其大于或等于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） 。移动“警报”

我给了每个
一个类名，因为我发现这样做比较容易，虽然你可以计算出有多少
，减去一，然后调用它。所以我将其移动到宽度达到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();
    }
});

$（'.Quick Sidebar'）.bind（'resize'，函数（e）{
如果（$（this）.width（）>=400）{
$（'.QSB NM Alerts'）.insertBefore（'li.dropdown'）；
$（'.QSB NM警报i'）.hide（）；
}
如果（$（this）.width（）和“More”链接指向什么？预期的内容/行为是什么？@Webomatik，在列表下方，第一段“More”下拉列表，你点击它，它会显示额外的项目，第二层。哈，我明白了，调整大小后，你想切换下拉菜单的隐藏/显示UL@TimMarshall-在这种混乱中，您唯一需要的部分是：
$（'.Quick Sidebar'）.bind（'resize'，function（e）{//这里有所有神奇的resize mojo}）
这将设置该分区上的调整大小观察者。@Korgrue由于您的帮助，我刚刚更新了我的问题。谢谢！还有“更多”链接将指向什么？预期的内容/行为是什么？@Webomatik，在列表下方，第一段“更多”下拉列表，你点击它，它会显示额外的项目，第二层。哈，我明白了，调整大小后，你想切换下拉菜单的隐藏/显示UL@TimMarshall-在这种混乱中，您唯一需要的部分是：
$（'.Quick Sidebar'）.bind（'resize'，function（e）{//这里有所有神奇的resize mojo}）
这将在该分区上设置您的调整大小观察者。@Korgrue由于您的帮助，我刚刚更新了我的问题。谢谢！