4

我在 jsFiddle 上上传了我的代码，你可以在那里看到它。

http://jsfiddle.net/SrT2U/2/

当你点击链接时，隐藏的 FAQ 部分会显示出来，它会向下推其他 div。但这不是我想要的，我需要所有其他 div 留在原处，而我隐藏的常见问题解答部分只是浮在顶部。不知道该怎么做。甚至不确定这是否应该在 HTML、CSS 或 jQuery 中完成。

我的 jQuery 代码：

$(function(){
    $(".OpenTopMessage").click(function () {
        $("#details").slideToggle("slow");
    });
});

HTML 代码：

<div style="border: 1px solid #000;">
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
</div>

<div id="faqBox">
   <table width="100%">
<tr><td><a href="#" id="openFAQ" class="OpenTopMessage">this is hte faq section</a></td>
</tr>
    </table>

    <div id="details" style="display:none">
    <br/><br/><br/><br/><br/><br/><br/><br/>
 the display style property is set to none to ensure that the element no longer affects the layout of the page
 <br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
</div>
<br/><br/>
<div style="background:#c00;">other stuff heren the height reaches 0 after a hiding animation, the display style property is set to </div>
4

3 回答 3

3

一个简单的解决方法是添加position:absolute到您的 faqBox div。

jsFiddle 示例

Position:absolute将元素从文档流中取出，在这种情况下，允许它出现在您的其他元素之上而不是向下推。

于 2012-11-17T22:31:41.507 回答
3

您可以position:absolute在#detailsdiv 上使用。

示例：http: //jsfiddle.net/SrT2U/9/

你需要摆弄margin它才能让它排队。

编辑：注意到您正在使用margin:0 auto;将常见问题解答框居中。您可能需要找到另一种方法来排列盒子。

编辑2：

我注意到如果您将 FAQ div 放在表格中#faqbox，然后更改margin:0 auto;为div 并且一切正常。margin-top: 20px; margin-left:-16px;#details

示例 2：http: //jsfiddle.net/SrT2U/13/

注意：将类似的放在div里面table不是规范的代码，但它确实可以重新集中常见问题解答。

于 2012-11-17T22:32:38.600 回答
1

如果您希望 div 显示在其他元素之上而不改变其他元素的位置，则需要将其 CSS 位置属性设置为绝对。

在您的 css 文件中指定以下内容：

#details{
    position: absolute;
    left: 100px;//your desired position as regard to the left of your window
    top: 100px;//your desired position as regard to the top of your window
}

您也可以使用 jQuery 执行此操作，如下所示：

$(".OpenTopMessage").click(function () {
    $("#details").slideToggle("slow");
    $("#details").css("position", "absolute");
    $("#details").css("left", "40px/*some value*/");
    $("#details").css("top", "40px/*some value*/");
});

如果您仍想将弹出框定位在窗口的中心，可以使用 jQuery 将其居中，如下所示。

$(".OpenTopMessage").click(function () {
    $("#details").slideToggle("slow");
    $("#details").css("position", "absolute");
    window_width = $(window).width(); //Get the user's window's width
    window_height = $(window).height(); //Get the user's window's height
    $("#details").css("left", (window_width-$("#details").width())/2);
    $("#details").css("top", (window_height-$("#details").height())/2);
});

然后你的盒子就会居中。

此外，您可能会发现您的按钮“这是 hte faq 部分”被您的 div 覆盖，但您可以通过添加关闭按钮或添加以下代码轻松启用关闭弹出框：

$("body:not(#details)").click(function() {
    $("#details").slideToggle("slow");
});

这使您可以单击页面的任何部分以关闭目标 div #details，div 本身除外。

通常，如果您尝试制作弹出框或对话框，您可以尝试使用其他预先设计的插件，包括 jQuery UI ( http://jqueryui.com/dialog/ ) 或 blockUI ( http://www .malsup.com/jquery/block/），其中前者只支持对话框，后者支持各种弹出框。

于 2012-11-17T22:34:44.667 回答