JQuery用户界面（效果核）addClass / removeClass移除有多个选择一个元素上......但有一个问题 [英] JQuery UI (effects core) addClass/removeClass on one element with multiple selectors...but there's a catch
本文介绍了JQuery用户界面（效果核）addClass / removeClass移除有多个选择一个元素上......但有一个问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
感谢您抽空看看。我试图用JQ UI addClass /删除类方法在单击preceding兄弟的div扩大人力资源元素。 JQ UI效果使核心的两个类之间的平滑过渡动画： http://jqueryui.com/demos/removeClass/。此外，人力资源必须动态地添加$，实现更广泛的网站设计。
下面是拼图的碎片：
- 我的code呈现四个100x100px兄弟的div行。这两个div不上课，而是随意添加他们，如果它帮助 - 每个div最终将有一个独特的类。每4个分区后，有一个动态添加小时。
- 当点击任何给定的分区，则直接下小时，必须切换到类开放，这将导致行扩大。如果这个格，然后再次单击，则必须切换/小时，从删除类开放，造成人力资源的收缩到它原来的尺寸。
- 如果一个人的div被点击展开一个小时，然后另一个div被点击时，两个动画必须被触发：首先，开放式的类必须被删除，导致该行回落萎缩，那么该类必须是重新添加到重新打开该行。但是，如果，例如，一个div被点击打开第二排，然后第二个div preceding第一个小时被点击时，这个动作必须先关闭第二个小时，然后打开第二个div的相应小时。
我卡住了。我已经尝试了一些JQ功能组合，但结果是怪诞。你看到的是我已经得到最接近。谢谢你给这个一杆。随意添加到code但是你可以得到这个工作。
＆LT;！ - HTML ......孩子们。主要可以有自己独特的课程是否有帮助的div - ＆GT;
＆LT; DIV CLASS =主＆GT;
＆LT; DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;/ * CSS-一些这造成上面未提及的其他活动。这是什么，我需要为我的最终的网站设计简化版本* /{。主要
宽度：450像素;
}
。主要的div {
高度：100像素;
宽度：100像素;
背景颜色：＃000;
保证金：的3px;
浮动：左;
}
div.select {
背景颜色：＃F00;
边界：2px的固体＃00F;
保证金：的3px;
浮动：左;
显示：块;
}
div.active {
背景颜色：＃F00;
保证金：的3px;
浮动：左;
显示：块;
}
小时{
背景颜色：＃FF0;
浮动：左;
显示：块;
高度：20像素;
宽度：450像素;
}
hr.open {
浮动：左;
显示：块;
高度：300像素;
宽度：450像素;
}
/ *的JS - 抱歉双引号。我使用Dreamweaver，这似乎将它们添加到的一切* /$（文件）。就绪（函数（）{
// dynamcally增加的＆lt;人力资源与GT;以后每4个分区。
$（主分区：第n个孩子（4N））后（'＆LT;人力资源类=封闭＆GT;＆LT; /小时＆GT;'）;。
//把一个蓝色的边框上的平方
$（'。主分区）。悬停（函数（）{
$（本）.addClass（'选择'）;
}，
功能（）{
$（本）.removeClass（选择）
}）;
//更改活动广场红色的颜色和禁用的previous之一。
$（'。主分区'）。点击（函数（）{
$（本）.toggleClass（激活）的兄弟姐妹（）removeClass移除（激活）。
}）;
//这里存在一个问题...？
$（'。主分区'）。点击（函数（）{
$（'小时'）removeClass移除（开放，1000）。
$（本）.toggle
（函数（）{
$（本）.nextAll（HR）第一（）addClass（开放，500）。;
}，
功能（）{
$（本）.nextAll（HR）。第一个（）。removeClass移除（开放，500）
}）; }）;
}）;
解决方案
我是pretty肯定这就是你想要什么，我从复制的 http://makr.com （你提到这是你想要的）：
演示： http://jsfiddle.net/SO_AMK/xm7Sk/
jQuery的：
$（主要文章：第n个孩子（4N））。后（＆LT;人力资源类=分裂＆GT;＆LT; /小时＆GT;'）;
$（主要方式＆gt;文章.slidedown）。点击（函数（五）{
e.stopPropagation（）;
}）; //如果你点击了slideDown时，不会崩溃VAR canAnimate = TRUE，
slideIsOpen =假，
animateSpeed = 1000;$（主要方式＆gt;的文章）。悬停（函数（）{
$（本）.addClass（悬停）;
}，函数（）{
$（本）.removeClass（悬停）;
}）。点击（函数（）{
如果（canAnimate）{
canAnimate = FALSE;
VAR文章= $（本），
isThisOpen = article.hasClass（活动）;
如果（isThisOpen）{
$（主）。队列（函数（）{
hideSlide（$（本））
}）;
}
其他{
如果（slideIsOpen）{
$（主）。队列（函数（）{
hideSlide（$（本））;
}）。队列（函数（）{
positionPage（文章，$（本））;
}）。队列（函数（）{
showSlide（文章，$（本））;
}）。队列（函数（）{
positionPage（文章，$（本））;
}）;
}
其他{
$（主）。队列（函数（）{
positionPage（文章，$（本））;
}）。队列（函数（）{
showSlide（文章，$（本））;
}）。队列（函数（）{
positionPage（文章，$（本））;
}）;
}
}
}
}）;功能showSlide（榆树，主）{
canAnimate = FALSE;
slideIsOpen =真;
。elm.nextAll（hr.split）第一（）addClass（活跃，animateSpeed）; 。elm.children（了slideDown），CSS（顶，（elm.offset（）顶部+ 114））addClass（活动）的slideToggle（animateSpeed）; elm.addClass（活性）;
main.dequeue（）;
canAnimate = TRUE;
}功能hideSlide（主）{
canAnimate = FALSE;
$（主article.active。）nextAll（hr.split.active）removeClass移除（激活，animateSpeed）; $（主article.active）儿童（了slideDown）。removeClass移除（活动）的slideToggle（animateSpeed）。; $（主article.active。）removeClass移除（活性）;
$（主）.dequeue（）;
canAnimate = TRUE;
slideIsOpen = FALSE;
}功能positionPage（榆树，主）{
canAnimate = FALSE;
VAR体;
如果（.browser.safari $）{
身体= $（身体）;
}
其他{
身体= $（HTML）;
}
VAR elmTop = elm.offset（）。顶，
bodyScroll = body.scrollTop（）;
如果（bodyScroll - elmTop == 0）{
变种速度= 0;
}
其他{
VAR速度= animateSpeed;
}
body.animate（{
scrollTop的：elmTop
}，速度快，功能（）{
main.dequeue（）;
canAnimate = TRUE;
}）
}
这可能看起来像这么小的东西大的脚本，但它有一些故障保险箱。唯一的缺陷是，如果你开始的过渡过程中快速点击有时队列以错误的顺序结束。但是，普通用户不会很快动画中点击：D
Thanks for taking a look. I'm trying to used the jQ UI addClass / remove Class methods to expand an hr element upon clicking preceding sibling divs. jQ UI effects core enables smooth animated transition between two classes: http://jqueryui.com/demos/removeClass/. Additionally, hr must be added dynamically with $ to achieve the broader site design.
Here are the pieces of the puzzle:
- My code renders rows of four 100x100px sibling divs. These divs don't have classes, but FEEL FREE TO ADD THEM IF IT HELPS -- each div will eventually have a unique class. After every 4th div, there's a dynamically added hr.
- Upon clicking any given div, the immediate next hr must toggle to the class "open", which causes the row to expand. If this div is then clicked again, it must toggle/remove the class "open" from hr, causing the hr the shrink to it's original size.
- If one div is clicked to expand a hr and then another div is clicked, two animations must be triggered: first, the "open" class must be removed, causing the row to shrink back down, and THEN the class must be re-added to reopen the row. However, if, for example, a div is clicked to open the second row, and then a second div preceding the first hr is clicked, this action must first close the second hr and then open the second div's corresponding hr.
I'm stuck. I've tried a number of jQ function combos, but the results are whacky. What you see is the closest I've gotten. Thanks for giving this one a shot. Feel free to add to the code however you can to get this working.
<!--HTML...the children divs of ".main" can have their own unique classes if that helps-->
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
/*CSS-some of this creates other events not mentioned above. These are simplified versions of what I need for my final site design*/
.main {
width: 450px;
}
.main div {
height: 100px;
width: 100px;
background-color: #000;
margin: 3px;
float:left;
}
div.select {
background-color: #f00;
border: 2px solid #00F;
margin: 3px;
float:left;
display: block;
}
div.active {
background-color: #f00;
margin: 3px;
float:left;
display: block;
}
hr {
background-color: #FF0;
float: left;
display: block;
height: 20px;
width: 450px;
}
hr.open {
float: left;
display: block;
height: 300px;
width: 450px;
}
/*the JS - sorry about the double quotes. I'm using Dreamweaver, which seems to add them to everything*/
$(document).ready(function() {
//dynamcally adds the <hr> after every 4th div.
$(".main div:nth-child(4n)").after('<hr class="closed"></hr>');
//puts a blue border on the squares
$('.main div').hover(function() {
$(this).addClass('select');
},
function() {
$(this).removeClass('select')
});
//changes the color of the active square to red and "deactivates" the previous one.
$('.main div').click(function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
//here in lies the problem...???
$('.main div').click(function() {
$('hr').removeClass('open', 1000);
$(this).toggle
(function() {
$(this).nextAll("hr").first().addClass('open', 500);
},
function() {
$(this).nextAll("hr").first().removeClass('open', 500)
});
});
});
解决方案
I am pretty sure that this is what you want, I copied the general HTML layout from http://makr.com (you mentioned that that was what you wanted):
Demo: http://jsfiddle.net/SO_AMK/xm7Sk/
jQuery:
$(".main article:nth-child(4n)").after('<hr class="split"></hr>');
$(".main > article .slidedown").click(function(e) {
e.stopPropagation();
}); // If you click on the slidedown, it won't collapse
var canAnimate = true,
slideIsOpen = false,
animateSpeed = 1000;
$(".main > article").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
}).click(function() {
if (canAnimate) {
canAnimate = false;
var article = $(this),
isThisOpen = article.hasClass("active");
if (isThisOpen) {
$(".main").queue(function () {
hideSlide($(this))
});
}
else {
if (slideIsOpen) {
$(".main").queue(function () {
hideSlide($(this));
}).queue(function () {
positionPage(article, $(this));
}).queue(function () {
showSlide(article, $(this));
}).queue(function () {
positionPage(article, $(this));
});
}
else {
$(".main").queue(function () {
positionPage(article, $(this));
}).queue(function () {
showSlide(article, $(this));
}).queue(function () {
positionPage(article, $(this));
});
}
}
}
});
function showSlide(elm, main) {
canAnimate = false;
slideIsOpen = true;
elm.nextAll("hr.split").first().addClass("active", animateSpeed);
elm.children(".slidedown").css("top", (elm.offset().top + 114)).addClass("active").slideToggle(animateSpeed);
elm.addClass("active");
main.dequeue();
canAnimate = true;
}
function hideSlide(main) {
canAnimate = false;
$(".main article.active").nextAll("hr.split.active").removeClass("active", animateSpeed);
$(".main article.active").children(".slidedown").removeClass("active").slideToggle(animateSpeed);
$(".main article.active").removeClass("active");
$(main).dequeue();
canAnimate = true;
slideIsOpen = false;
}
function positionPage(elm, main) {
canAnimate = false;
var body;
if ($.browser.safari) {
body = $("body");
}
else {
body = $("html");
}
var elmTop = elm.offset().top,
bodyScroll = body.scrollTop();
if (bodyScroll - elmTop == 0) {
var speed = 0;
}
else {
var speed = animateSpeed;
}
body.animate({
scrollTop: elmTop
}, speed, function () {
main.dequeue();
canAnimate = true;
})
}
This may seem like a large script for something so small but it has some fail-safes. The only bug is, if you start clicking quickly during transitions sometimes the queues end up in the wrong order. But, the average user doesn't click quickly during animations :D
这篇关于JQuery用户界面（效果核）addClass / removeClass移除有多个选择一个元素上......但有一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
