[英]apply css to grandparent div when slide is active
I have a carousel on my homepage .我的主页上有一个轮播。 When the third carousel appears, the carousel buttons
div class="rotator-controls"
move down due to the image taking space.当第三个轮播出现时,轮播按钮
div class="rotator-controls"
由于图像占用空间而向下移动。 My goal here is to keep this div the same height as the other 4. Which means that when the <span>
(index 2) of the grandchild div <div class="rotator-pagination">
is active, I apply the correct css to the <div class="rotator-controls">
(eg bottom:60px).我的目标是保持这个 div 与其他 4 个相同的高度。这意味着当孙子 div
<div class="rotator-pagination">
的<span>
(索引 2)处于活动状态时,我应用正确的 css到<div class="rotator-controls">
(例如底部:60px)。 As the carousel is jQuery cycle 2, when the span is active it has the class cycle-pager-active
.由于轮播是 jQuery 周期 2,当跨度处于活动状态时,它具有 class
cycle-pager-active
。
I have tried using domcontentloaded.我尝试过使用 domcontentloaded。 ie
IE
document.addEventListener("DOMContentLoaded", function() {
var span = document.querySelector("#homepage-rotator > div.banner.cycle-slide.cycle-slide-active > div > div.banner-content-area > div.rotator-controls > div.rotator-pagination").children[2];
if (jQuery(span).hasClass("cycle-pager-active")){
var grandPDiv = document.querySelector("div.rotator-controls");
grandPDiv.style.bottom = "-60px";
}
});
This does not work.这不起作用。 But if I do this in the console, and wait for the 3rd carousel to be acitve, using
jQuery(span).hasClass("cycle-pager-active")
returns true
.但是,如果我在控制台中执行此操作,并等待第三个轮播激活,则使用
jQuery(span).hasClass("cycle-pager-active")
返回true
。 How do i apply css (to its grandparent element) only when the span element is active?仅当 span 元素处于活动状态时,我如何应用 css (对其祖父元素)?
Try this尝试这个
.banner-content-area {
min-height: 440px;
}
if not work then add min-height: 440px;important;如果不起作用,则添加 min-height: 440px;important;
This works perfectly:这完美地工作:
.banner-content-area {
min-height: 440px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.