jquery插件适用于悬停，但不适用于隐藏元素
我正在尝试应用插件但面临一些问题。 这是代码
$('.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 & 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 & 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 & 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 & Safes</a></li>
<li><a href="category-v1.html">File Cabinet Accessories</a></li>
<li><a href="category-v1.html">Art & Drafting Files</a></li>
<li><a href="category-v1.html">Shelving</a></li>
<li><a href="category-v1.html">Overfiles & Tops</a></li>
<li><a href="category-v1.html">Mobile Files & 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 & 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 & 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 & 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 & Holders</a></li>
<li><a href="category-v1.html">Desktop Computer Accessories</a></li>
<li><a href="category-v1.html">Bookends & Book Shelves</a></li>
<li><a href="category-v1.html">Wall Organizers</a></li>
<li><a href="category-v1.html">Desktop Organizers & 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 & 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 & Forms</h2>
<ul class="links">
<li><a href="category-v1.html">Forms & 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 & Tabs</a></li>
<li><a href="category-v1.html">Clocks</a></li>
<li><a href="category-v1.html">Clips, Tacks & Rubber Bands</a></li>
<li><a href="category-v1.html">Books</a></li>
<li><a href="category-v1.html">Badges & Holders</a></li>
<li><a href="category-v1.html">Scissors, Rulers & Paper Trimmers</a></li>
<li><a href="category-v1.html">Paper Punches</a></li>
<li><a href="category-v1.html">Stamps & Pads Accessories</a></li>
<li><a href="category-v1.html">Signs & 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 & Adhesives</a></li>
<li><a href="category-v1.html">Tags & Tickets</a></li>
</ul>
</div>
</div>
参考插件。 BlocksIt
注意：一个问题是，当我删除加载代码时，我只使用此代码
$('.shuffle').one('mouseenter', function () {
$(this).BlocksIt({
numOfCol: 4,
offsetX: 8,
offsetY: -18,
blockElement: '.grid'
});
})
现在，当用户将指针指向家具时，它会在家具下显示未安排的块，然后用户将指针置于随机类中，并排列所有内容。这意味着除非未显示下面的部分，否则不会应用插件。知道如何解决这个问题吗？
3 个答案:
答案 0 :(得分：0)
首先，您发布的源代码上有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>
答案 1 :(得分：0)
问题发生是因为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");
});
})
答案 2 :(得分：0)
最后我用这种方法做了 创建了一个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属性。然后删除该类将重置默认行为。
希望这最后的信息对许多人有用。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？