jquery .show() 多个“位置：固定” div 问题

发布于 2024-10-14 15:52:45 字数 7604 浏览 5 评论 0原文

我正在处理的网站中有两个单独的 div，当用户单击链接时显示和隐藏（每个 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;
}

原文

I have two separate divs in the site I'm working on that show and hide when the user clicks on a link (there is a link for each div). The second div and link were added yesterday. When there was only one div and link there were no problems.

The problem I'm encountering is that when I click on the link to show the second div nothing happens. However, when I click on the link to show the first div, both show up. I tried changing the order of the markup, and when the second div is located before the first div in the markup the opposite happens - the first div does not show when its link is clicked, and both show up when the second link is clicked.

Since both of these divs are using fixed positioning and slide in from the right edge of the screen I thought the overlapping was causing the div not to display. But I increased the space between the divs to avoid the overlap and the problem remains. UPDATE: I've also tested making one of the panels be fixed on the left of the screen to totally rule out the overlap from the cause of the issue but the issue still occurred.

Is there any type of parameter or callback function that I can send into the show function to force jQuery to show an element?

Any help will be very much appreciated.

Here is the 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;
   }
 });

});

The markup for these sections is located at the very end of the body section. Here is the markup:

<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>

And finally here is the 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;
}

分享到QQ

分享到微博