Question

也许是一个奇怪的问题 -

我设计了一个非常简单的幻灯片。幻灯片显示的一部分包括当您将鼠标悬停在幻灯片div上时显示的一些文本。当您滑动幻灯片div时，此文本应该消失 - 它在当前显示的幻灯片上会消失。但是在轮换时，人们发现之前隐藏文本的幻灯片仍在显示（可能是因为人们无法隐藏其父级已被隐藏的元素）。所以......

在父母被隐藏的时候，我有没有隐藏这些子元素？

这是一些代码，我可以提供更多。

$("#banner").hoverIntent(function(){
    $(".bannercontrols, .bannerblurb").show('slow');
    clearTimeout(timer);
},function(){
    $(".bannercontrols, .bannerblurb").hide('slow');
    timer = setTimeout(function(){ beginRotation(); },slidetime);
});

感谢您的帮助。下面的HTML - 很长，但是让您了解设置 - 所有各个部分都是手工编写的，然后根据需要隐藏/显示。

<div id="banner" style="position:relative; width:595px; height:254px; background-color:#000; margin:0 0 7px 30px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;">

        <div style="position:absolute; width:595px; height:254px;">
                            <img class="bannerimg" 
                     src="williams-ftr.jpg" />
                            <img class="bannerimg" 
                     src="ftr.jpg" />
                            <img class="bannerimg" 
                     src="cassin-ftr.jpg" />
                            <img class="bannerimg" 
                     src="what-do-we-do-feature.jpg" />
                    </div>

        <div id="banner-prev" class="bannercontrols" style="position:absolute; z-index:999; top:100px; left:5px; cursor:pointer;">
            <img width="25" src="/images/banner-prev.png" />
        </div>

        <div id="banner-next" class="bannercontrols" style="position:absolute; z-index:999; top:100px; right:5px; cursor:pointer;">
            <img width="25" src="/images/banner-next.png" />
        </div>

        <div style="position:absolute; text-align:right; padding:3px 5px; color:#FFF; width:585px; left:0; top:0; background-image:url(/images/black-55.png)">

            <div style="font-size:10px;">
                <em>Wednesday, February 13th, 2013</em>
            </div>

        </div>


        <div class="textblock" style="position:absolute; padding:5px 10px 12px 5px; color:#FFF; width:580px; height:auto; left:0; bottom:0; background-image:url(/images/black-55.png);">
                            <div class="bannertext" style="display:none">
                    <a class="banner" href="/">
                        <div class="bannertitle">
                            TITLE
                        </div>
                        <div class="bannerblurb" 
                             style="display:none; font-size:12px; font-family:Georgia, 'Times New Roman', Times, serif">
                           blurb blurb blurb                      </div>
                    </a>        
                </div>
                            <div class="bannertext" style="display:none">
                    <a class="banner" href="/">
                        <div class="bannertitle">
                            TITLE
                        </div>
                        <div class="bannerblurb" 
                             style="display:none; font-size:12px; font-family:Georgia, 'Times New Roman', Times, serif">
                            blurb blurb blurb </div>
                    </a>        
                </div>
                            <div class="bannertext" style="display:none">
                    <a class="banner" href="/">
                        <div class="bannertitle">
                            TITLE
                            </span>
                        </div>
                        <div class="bannerblurb" 
                             style="display:none; font-size:12px; font-family:Georgia, 'Times New Roman', Times, serif">
                            blurb blurb blurb </div>
                    </a>        
                </div>
                            <div class="bannertext" style="display:none">
                    <a class="banner" href="/">
                        <div class="bannertitle">
                            <span style="font-size:22px;"><span style="font-size: 80%;">TITLE
                            </span>
                        </div>
                        <div class="bannerblurb" 
                             style="display:none; font-size:12px; font-family:Georgia, 'Times New Roman', Times, serif">
                           blurb blurb blurb </div>
                    </a>        
                </div>

        </div>

        <div style="position:absolute; width:595px; height:8px; left:0; bottom:0; background-image:url(/images/black-55.png)">

            <table class="fullbannerblock" width="100%" cellpadding="0" cellspacing="0">
                <tr>
                                    <td>
                        <div index="0" class="bannerblock"></div>
                    </td>
                                    <td>
                        <div index="1" class="bannerblock"></div>
                    </td>
                                    <td>
                        <div index="2" class="bannerblock"></div>
                    </td>
                                    <td>
                        <div index="3" class="bannerblock"></div>
                    </td>

                </tr>
            </table>

        </div>    
    </div><!-- /banner -->

Answer 1

可以隐藏子元素，无论它们的父元素是否隐藏。我猜这个问题是由其他一些错误引起的。

jQuery：隐藏隐藏的元素

1 个答案: