1

我需要一点 jQuery 帮助。我在页面上显示了许多单独的产品 div ( .productsWrap )，所有这些都带有隐藏的信息部分。这个想法是，当单击特定产品的a.activator时，一个半透明的叠加层（.productsOverlay）会下降，然后是该特定产品的信息部分（.productsPopBox）。页面上可能有十个.productsWrap，所以我只希望一次显示一个弹出窗口。

简而言之，如果有人单击给定产品 ( .productsWrap ) 的 a.activator，那么.productsOverlay和.productsPopBox将仅针对该产品出现。

HTML 标记是：

<section class="productsWrap">
   <section class="blueHeader"><h2></h2></section>
   <article>
      <div class="productsText">
          <a class="activator">Full service details</a>
      </div>
   </article>
</section>

<div class="productsOverlay overlay" style="display:none;"></div>
<div class="productsPopBox popBox" >
    <h2></h2><span class="close">x</span>
</div>

这是我对 jQuery 的错误尝试：jsfiddle

我的第一次尝试有点奏效。它看起来不错，因为弹出窗口确实做了一些事情并且效果看起来不错。但是，它导致所有.productsWrap的所有.productsOverlay和.productsPopBox同时下降。

$('.activator').click(function(){
    $('.productsOverlay, .caseStudiesOverlay').fadeIn('fast',function(){
        $('.productsPopBox, .caseStudiesPopBox').animate({'top':'-150px'},500);
    });
});
$('.productsOverlay, .caseStudiesOverlay, span.close').click(function(){
    $('.productsPopBox, .caseStudiesPopBox').animate({'top':'-1000px'},500,function(){
       $('.productsOverlay, .caseStudiesOverlay').fadeOut('fast');
    });
});
4

1 回答 1

0

如果您还没有解决您遇到的问题，这里是您在链接的 jsfiddle 中的修改版本：链接

我不确定您是否要为“所有产品提供一个模式弹出窗口，弹出内容根据点击的产品而变化”或“每个产品都有自己的弹出窗口”。

如果是前者，您应该可以将 a.activator 的点击事件替换为：

$('.activator').click(function (e) {
    $('.productsOverlay, .popupClose, .productsPopBox').fadeOut(250);
    var wrapper = $(this).parents('.wrap');
    var html = $(this).siblings('.hiddenDetails').html();
    wrapper.children('.productsOverlay, .popupClose').fadeIn(250)
        .siblings('.productsPopBox').html(html).fadeIn(250);
});

并且只会显示当前产品的叠加层。

它（非常）粗糙，但我确信这只是意味着它很好，对吧？

于 2013-04-22T15:09:05.237 回答