最重要的注释

Question

我正在尝试应用插件但面临一些问题。这是代码

$('.shuffle').one('mouseenter', function () {
    $(this).BlocksIt({
        numOfCol: 4,
        offsetX: 8,
        offsetY: -18,
        blockElement: '.grid'
    });
})

我称之为

$(window).load(function () {
    $('.shuffle').each(function (i) {
        var self = this
        $(self).trigger('mouseenter')
    })
})

我正在创建一个菜单。这是一个图像演示。

在mouseenter之后，这就像这样

您会看到它消除空白区别并按正确顺序排列块的区别。问题是我想在页面加载时这样做，这样我就不必在每个菜单项上拖动鼠标，以便安排它的子项。

以下是我在每种方法后面临的问题。

您会看到每个shuffle类中的网格类都会混乱。

这是我的代码。我发布一些示例cos我的代码非常复杂。这基本上适用于shuffle类。

<div class="col-xs-12 col-sm-12 col-md-12 shuffle" style="height: 335px;">
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 231.5px; left: 0px; top: -18px; position: absolute;">
            <h2 class="title">Armoires &amp; Bookcases</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Showcases/ Displays</a></li>
                    <li><a href="category-v1.html">Bookcases</a></li>
                    <li><a href="category-v1.html">Armoires</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 231.5px; left: 277.5px; top: -18px; position: absolute;">
            <h2 class="title">Carts &amp; Stands</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Carts</a></li>
                    <li><a href="category-v1.html">Stands</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 231.5px; left: 832.5px; top: -18px; position: absolute;">
            <h2 class="title">Filing, Storage &amp; Accessories</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Lateral Files</a></li>
                    <li><a href="category-v1.html">Fire Resistant File Cabinets &amp; Safes</a></li>
                    <li><a href="category-v1.html">File Cabinet Accessories</a></li>
                    <li><a href="category-v1.html">Art &amp; Drafting Files</a></li>
                    <li><a href="category-v1.html">Shelving</a></li>
                    <li><a href="category-v1.html">Overfiles &amp; Tops</a></li>
                    <li><a href="category-v1.html">Mobile Files &amp; Carts</a></li>
                    <li><a href="category-v1.html">Literature Organizers/Sorters/Racks</a></li>
                    <li><a href="category-v1.html">Shelving Accessories</a></li>
                    <li><a href="category-v1.html">Storage Cabinets &amp; Lockers</a></li>
                    <li><a href="category-v1.html">Vertical Files</a></li>
            </ul>
        </div>
</div>


<div class="col-xs-12 col-sm-12 col-md-12 shuffle" style="height: 0px;">
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -18px; position: absolute;">
            <h2 class="title">Binders &amp; Accessories</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Binders</a></li>
                    <li><a href="category-v1.html">Binder Accessories</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -54px; position: absolute;">
            <h2 class="title">Boards &amp; Easels</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Boards</a></li>
                    <li><a href="category-v1.html">Board Accessories</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -198px; position: absolute;">
            <h2 class="title">Desk Organizers</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Desk Organizers &amp; Holders</a></li>
                    <li><a href="category-v1.html">Desktop Computer Accessories</a></li>
                    <li><a href="category-v1.html">Bookends &amp; Book Shelves</a></li>
                    <li><a href="category-v1.html">Wall Organizers</a></li>
                    <li><a href="category-v1.html">Desktop Organizers &amp; Holders</a></li>
                    <li><a href="category-v1.html">Desktop Organizer Accessories</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -234px; position: absolute;">
            <h2 class="title">Filing Supplies</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Medical Filing</a></li>
                    <li><a href="category-v1.html">Folders</a></li>
                    <li><a href="category-v1.html">Filing Accessories</a></li>
                    <li><a href="category-v1.html">Jackets</a></li>
                    <li><a href="category-v1.html">Hanging Folders</a></li>
                    <li><a href="category-v1.html">Report Covers &amp; Portfolios</a></li>
                    <li><a href="category-v1.html">File Folders</a></li>
                    <li><a href="category-v1.html">Expanding Files</a></li>
                    <li><a href="category-v1.html">Guides</a></li>
                    <li><a href="category-v1.html">Folder Frames and Sorters</a></li>
                    <li><a href="category-v1.html">End Tab Folders / Medical</a></li>
                    <li><a href="category-v1.html">Classification Folders</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -270px; position: absolute;">
            <h2 class="title">Envelopes &amp; Forms</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Forms &amp; Certificates</a></li>
                    <li><a href="category-v1.html">Envelopes</a></li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 grid" style="width: 9px; left: 0px; top: -306px; position: absolute;">
            <h2 class="title">General Supplies</h2>
            <ul class="links">
                    <li><a href="category-v1.html">Paper Punch Accessories</a></li>
                    <li><a href="category-v1.html">Pad Holders</a></li>
                    <li><a href="category-v1.html">Magnification</a></li>
                    <li><a href="category-v1.html">Indexing Flags &amp; Tabs</a></li>
                    <li><a href="category-v1.html">Clocks</a></li>
                    <li><a href="category-v1.html">Clips, Tacks &amp; Rubber Bands</a></li>
                    <li><a href="category-v1.html">Books</a></li>
                    <li><a href="category-v1.html">Badges &amp; Holders</a></li>
                    <li><a href="category-v1.html">Scissors, Rulers &amp; Paper Trimmers</a></li>
                    <li><a href="category-v1.html">Paper Punches</a></li>
                    <li><a href="category-v1.html">Stamps &amp; Pads Accessories</a></li>
                    <li><a href="category-v1.html">Signs &amp; Nameplates</a></li>
                    <li><a href="category-v1.html">Staplers</a></li>
                    <li><a href="category-v1.html">Stapler Accessories</a></li>
                    <li><a href="category-v1.html">Tape, Glue &amp; Adhesives</a></li>
                    <li><a href="category-v1.html">Tags &amp; Tickets</a></li>
            </ul>
        </div>
</div>

参考插件。 BlocksIt

注意：一个问题是，当我删除加载代码时，我只使用此代码

$('.shuffle').one('mouseenter', function () {
    $(this).BlocksIt({
        numOfCol: 4,
        offsetX: 8,
        offsetY: -18,
        blockElement: '.grid'
    });
})

现在，当用户将指针指向家具时，它会在家具下显示未安排的块，然后用户将指针置于随机类中，并排列所有内容。这意味着除非未显示下面的部分，否则不会应用插件。知道如何解决这个问题吗？

Answer 1

首先，您发布的源代码上有style个属性。删除那些。

然后，摆脱BlocksIt并使用Masonry代替。为什么？因为我已经知道如何使用砌体了。

在您发布的源代码中，您有两个div级别。这看起来像是一个错误。您应该有一个“父”div，其中包含您的所有孩子div。

以下是我的解决方案：http://jsbin.com/gixuhu

<head>
<style>
    /* REQUIRED FOR MASONRY TO WORK! */
    .masonry > div{width:230px;}
</style>
</head>
<body>
    <!-- SEE JSBIN LINK ABOVE FOR HTML -->
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
    <script>
        // ProTip: if you put your masonry code AFTER the elements that need it you can fire it off without waiting for `document.ready`
        $(".masonry").masonry();
        // not the most performant solution, but it should work.
        $(".hover").on("mouseover", function(){
            $(".masonry").masonry({
                transitionDuration: 0
            });
        });
    </script>
</body>

Answer 2

问题发生是因为BlocksIt无法与invisible元素

一起正常运行

尝试这样的事情

$(document).ready(function () {
    $(".furniture-menu").mouseenter(function(){
        $(".shuffle-parent-has-display-is-hidden").show();
        $(".shuffle").BlocksIt({
            numOfCol: 4,
            offsetX: 8,
            offsetY: -18,
            blockElement: '.grid'
        });
        $(".menu").off("mouseenter");
    });
})

Answer 3

最后我用这种方法做了创建了一个css类

.dropdown-display {
    display:block;
}

然后找出隐藏div的父母

var $selector = $(this).parents().eq(3);

这是最后一个代码

$('.shuffle').each(function () {
    var self = this;
    var $selector = $(this).parents().eq(3);
    $selector.addClass('dropdown-display');
    $(self).BlocksIt({
        numOfCol: 4,
        offsetX: 8,
        offsetY: -18,
        blockElement: '.grid'
    })
    $selector.removeClass('dropdown-display');
})

最重要的注释

有一点需要注意，为什么我使用了一个类而不是简单的

$selector.css({display:'block'})

然后删除

$selector.css({display:'none'})

因为它在这样的元素上添加了一个样式属性内联。

<ul class="dropdown-menu fadeInUp animatedfadeInUpanimated" style="display:block">

<ul class="dropdown-menu fadeInUp animatedfadeInUpanimated" style="display:none">

一旦添加了属性，类中的style属性将永远不会被调用当我添加类时，它会动态覆盖类的display:none属性。然后删除该类将重置默认行为。

希望这最后的信息对许多人有用。

jquery插件适用于悬停，但不适用于隐藏元素

3 个答案:

最重要的注释