如何不 .append div 在桌面上 window 调整大小

Question

如果 window 屏幕尺寸大于 768px - div <tab-content> 不应附加到 <li>（顺便说一句。如果 window 比桌面尺寸小，但如果您从较小的 window 尺寸开始并拖动到较大的桌面尺寸，它根本不应该附加 div）-

See fiddle.

html -

<div class="row">
        <div class="col-lg-12">

             <div role="tabpanel" id="tabs-test">
              <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#divTab1" aria-controls="" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#divTab2" aria-controls="" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a href="#divTab3" aria-controls="" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a href="#divTab4" aria-controls="" role="tab" data-toggle="tab">Settings</a></li>
              </ul>
              <!-- Tab panes -->
              <div class="tab-content-outer">
                  <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="divTab1">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                    <div role="tabpanel" class="tab-pane" id="divTab2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                    <div role="tabpanel" class="tab-pane" id="divTab3">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    <div role="tabpanel" class="tab-pane" id="divTab4">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>
                  </div>
              </div>
            </div>
            <!-- /tabpanel -->

        </div>
    </div>
    <!-- /.row -->

js -

    //NEW Tabs to Accordion
window.tabsAreEnabled = false;

var enableTabs = function () {
    if ($(window).width() <= 768) {
        // Initial move to first active li
        $('.tab-content').appendTo(".nav-tabs li.active").hide();

        $(".nav-tabs").on('click', 'li:not(.active)', function () {
            $('.tab-content').appendTo($(this));
            $('.tab-content').show();
        });
        $(".nav-tabs").on('click', 'li.active', function () {
            $('.tab-content').toggle();
        });
        window.tabsAreEnabled = true;
    } else {
        $(".tab-content").appendTo(".tab-content-outer");
        window.tabsAreEnabled = false;
    }
};

enableTabs();

$(window).resize(function () {
    if (!window.tabsAreEnabled) {
        enableTabs();
    }
});

Answer 1

我不清楚你到底想要什么，但我会试一试。

Take a look [updated update of update]

var isActive = false;
var $tabContent = $('.tab-content');
var $navTabs = $('.nav-tabs');

var enableTabs = function () {
    if ($(window).width() <= 768) {
        // Initial move to first active li
        $tabContent.appendTo(".nav-tabs li.active");

        $navTabs.on('click', 'li:not(.active)', function () {
            if(!isActive)
                return;
            $tabContent.appendTo($(this));
            $tabContent.show();
        });
        $navTabs.on('click', 'li.active', function () {
            if(!isActive)
                return;
            $tabContent.toggle();
        });
        isActive = true;
    } else {
        $tabContent.appendTo(".tab-content-outer");
        isActive = false;
    }
};

enableTabs();

if ($(window).width() <= 768) {
    $tabContent.hide();
}

$(window).resize(function () {
    enableTabs();
});

如何不 .append div 在桌面上 window 调整大小

How to not .append div on desktop window resize

html

jquery

twitter-bootstrap-3