jquery .show()多个“position:fixed”divs问题

时间:2011-01-29 21:00:49

标签: jquery show-hide

我在网站上有两个独立的div我正在处理该节目并在用户点击链接时隐藏(每个div都有一个链接)。昨天增加了第二个div和链接。当只有一个div和链接时没有问题。

我遇到的问题是当我点击链接显示第二个div时没有任何反应。但是,当我点击链接显示第一个div时,两个都显示出来。我尝试更改标记的顺序,当第二个div位于标记中的第一个div之前时,相反的情况发生 - 第一个div在单击其链接时不显示,并且在单击第二个链接时都显示。

由于这两个div都使用固定定位并从屏幕的右边缘滑入,我认为重叠导致div不显示。但我增加了div之间的空间以避免重叠,问题仍然存在。更新:我还测试了将其中一个面板固定在屏幕左侧以完全排除问题原因的重叠但问题仍然存在。

是否有任何类型的参数或回调函数可以发送到show函数以强制jQuery显示元素?

非常感谢任何帮助。

这是javascript:

$(document).ready(function(){

// Initialize Contact Us panel
$('#contacton').css('position', 'fixed');
$('#contacton').css('bottom', '60px');
$('#contacton').css('right', '0');
$('#contacton').css('overflow', 'visible');
$('#contacton').hide();
$('#contactoff').show();
var contacting = false;

//Initialize Newsletter Subscription panel
$('#subscribeon').css('position', 'fixed');
$('#subscribeon').css('bottom', '270px');
$('#subscribeon').css('right', '0');
$('#subscribeon').css('overflow', 'visible');
$('#subscribeon').hide();
$('#subscribeoff').show();
var subscribing = false;


 // Expand Newsletter Subscription panel
 $('#subscribeoff').click(function() {
 if (subscribing) {
 // Error - this should not happen as tab is hidden
   } else {
   subscribing = true;
   $('#subscribeoff').hide();
   $('#subscribeon').show('fast');
   return false;
   }
 });

 // Collapse Newsletter Subscription panel
 $('#subscribeontab').click(function() {
 if (!subscribing) {
 // Error - this should not happen as tab is hidden
   } else {
   subscribing = false;
   $('#subscribeon').hide('fast');
   $('#subscribeoff').show();
   return false;
   }
 });

 // Collapse Contact Us panel
 $('#contactontab').click(function() {
 if (!contacting) {
 // Error - this should not happen as tab is hidden
   } else {
   contacting = false;
   $('#contacton').hide('fast');
   $('#contactoff').show();
   return false;
   }
 });

 // Expand Contact Us panel
 $('#contactoff').click(function() {
 if (contacting) {
 // Error - this should not happen as tab is hidden
   } else {
   contacting = true;
   $('#contactoff').hide();
   $('#contacton').show('fast');
   return false;
   }
 });

});

这些部分的标记位于正文部分的最末端。这是标记:

<body>
<div id="header_section">
...
</div>
<div id="nav_menu">
..
</div>
<div id="body_wrap">
...
</div>
<div id="footer">
...
</div>

    <div id="subscribeoff">
        <a title="Subscribe to our FREE Newsletter" href="#"><img id="subscribeimg" src="/Epic/Boxes/subscribe-free-real-estate-newsletter-off.png" width="30" height="55" alt="Epic Properties Real Estate Newsletter" /></a>
    </div>

    <div id="contactoff">
        <a title="Open Contact Us Panel" href="#"><img id="contactimg" src="/Epic/Boxes/contactoff.png" width="30" height="100" alt="Contact Us" /></a>
    </div>

    <div id="subscribeon">
        <div id="subscribeformwrap">
            <div id="subscribeinfo">
                <p class="subscribetext">Sign up for the Epic Newsletter for the latest trends in the Valley's luxury real estate market.</p>
                <p class="subscribetext" id="subscribelastp">If you are a member of Epic Properties you can subscribe to the Epic Newsletter by accessing your account.</p>

            </div> <!-- end subscribeinfo -->
            <div id="subscribeform">
                <form id="newsletterform" name="newsletterform" method="post" action="/">
                    <fieldset class="subscribefields">
                        <label for="fname">FIRST NAME</label>
                        <input type="text" id="fname" />
                    </fieldset>
                    <fieldset class="subscribefields">
                        <label for="lname">LAST NAME:</label>
                        <input type="text" id="lname" />
                    </fieldset>
                    <fieldset class="subscribefields">
                        <label for="email">E-MAIL:</label>
                        <input type="text" id="email" />
                    </fieldset>
                    <fieldset class="subscribefields" id="subscribebtn">
                        <input type="submit" name="send" id="subscribebutton" value="Sign Up" />
                    </fieldset>

                </form>
        </div> <!-- end subscribeform -->
        <div id="subscribeontab">
            <a title="Close Newsletter Panel" href="#"><img id="subscloseimg" src="/Epic/Boxes/subscloseoff.png" width="30" height="55" alt="Close Newsletter Panel" /></a>
        </div> <!-- end subscribeontab -->
    </div> <!-- end subscribeon -->

    <div id="contacton">
        <div id="contactformwrap">
            <div id="contactinfo">
                <h5 class="contacttitle">Contact Us</h5>
                <p class="contacttype">Phone:</p>
                <p class="contacttext">000.000.0000</p>
                <p class="contacttype">Fax:</p>
                <p class="contacttext">000.000.0000</p>
                <p class="contacttext" id="vcard"><a title="Epic Properties vCard" href="#">Download our vCard</a></p>
            </div> <!-- end contactinfo -->
            <div id="contactform">
                <h5 class="contacttitle" id="msgtitle">Send a Message</h5>
                <form id="messageform" name="messageform" method="post" action="/">
                    <fieldset class="contactfields">
                        <label for="name">NAME:</label>
                        <input type="text" id="name" />
                    </fieldset>
                    <fieldset class="contactfields">
                        <label for="email">E-MAIL:</label>
                        <input type="text" id="email" />
                    </fieldset>
                    <fieldset class="contactfields">
                        <label for="email">MESSAGE:</label>
                    </fieldset>
                        <textarea id="contactmessage"></textarea>
                    <fieldset class="contactfields" id="sendmsgbtn">
                        <input type="submit" name="send" id="sendmsgbutton" value="Send Message" />
                    </fieldset>

                </form>
        </div> <!-- end contactform -->
        <div id="contactontab">
            <a title="Close Contact Us Panel" href="#"><img id="closeimg" src="/Epic/Boxes/closeoff.png" width="30" height="100" alt="Close Contact Us Panel" /></a>
        </div> <!-- end contactontab -->
    </div> <!-- end contacton -->

</body>
</html>

最后这里是CSS:

#subscribeoff {
    display: none;
    position: fixed;
    bottom: 270px;
    right: 0;
}

#subscribeoff a img {
    border: none;
}
#subscribeon {
    display: block;
    position: fixed;
    bottom: 270px;
    right: 0;
    background: #000;
    background: rgba(0, 0, 0, .8);
}
#subscribeontab {
    position: absolute;
    bottom: 0;
    left: -30px;
}
#subscribeontab a img {
    border: none;
}

1 个答案:

答案 0 :(得分:0)

我认为你的HTML缺少一个结束div标签(<div id="subscribeformwrap">

如果你检查页面上的元素(使用Firebug或Safari),你的“contacton”div实际上在“subscribeon”div中