jquery插件正确地应用于悬停，但不适用于隐藏元素。

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')
    })
})

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

​

​

当鼠标变的像这样

​

​

您可以看到不同之处，它移除空白，并按适当的顺序排列块。问题是我想在页面加载时这样做，这样我就不必在每个菜单项上拖动鼠标，这样就可以安排它的子菜单项了。

下面是我在每一种方法之后要面对的问题。

​

​

您可以看到每个洗牌类中的网格类都会造成混乱。

这是我的代码。我正在发布一些示例，因为我的代码非常复杂。这基本上是关于洗牌课的。

<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

最后，我用这种方法完成了它。

创建了一个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">

一旦添加了属性，就永远不会调用类中的样式属性。

当我添加类时，它动态地重写类的display:none属性。然后删除类将重置默认行为。

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

Answer 2

首先，您发布的源代码上有style属性。把那些拿掉。

然后，去掉BlocksIt，转而使用砌体。为什么？因为我已经知道如何使用砖石了。

在您发布的源代码中，您有两个级别的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 3

问题的发生是因为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");
    });
})