Question

如果窗口屏幕大小超过768px - div <tab-content>不应附加到<li>（顺便说一句。如果窗口从桌面大小缩小，但是如果你从较小的窗口大小并拖动到更大的桌面大小，它根本不应附加div） -

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

1 个答案: