Fatal编程技术网
  • javascript/
  • Javascript 覆盖其他内容的Div下拉菜单

Javascript 覆盖其他内容的Div下拉菜单

javascript html css

Javascript 覆盖其他内容的Div下拉菜单,javascript,html,css,Javascript,Html,Css,我试图让它，当你点击一个图标在一个div，有一个下拉框，显示和覆盖div的内容。但现在，我的下拉框只是向下推div的内容，而不是覆盖它。在浏览了这个网站上类似的问题后，我几乎可以肯定问题出在我的CSS中，我必须使一些元素的位置：相对和其他元素的位置：绝对，但我已经玩了一段时间，似乎无法让它正常工作。下面是我的代码的干净版本（没有各种位置尝试） 相关CSS代码为： #ideas_box { display: inline-block; *display: inline; b

我试图让它，当你点击一个图标在一个div，有一个下拉框，显示和覆盖div的内容。但现在，我的下拉框只是向下推div的内容，而不是覆盖它。在浏览了这个网站上类似的问题后，我几乎可以肯定问题出在我的CSS中，我必须使一些元素的位置：相对和其他元素的位置：绝对，但我已经玩了一段时间，似乎无法让它正常工作。下面是我的代码的干净版本（没有各种位置尝试）

相关CSS代码为：

#ideas_box {
    display: inline-block;
    *display: inline;
    background-color: white;
    min-width: 1110px;

    overflow: hidden;
    margin: 0px 20px 20px 20px;

    border: solid 1px #6a6a6a;
    box-shadow: 3px 3px 3px #cecdcd;
    -moz-box-shadow: 3px 3px 3px #cecdcd;
    -webkit-box-shadow: 3px 3px 3px #cecdcd;
}

#ideas_box_majority_bar_green{
    display: inline-block;
    *display: inline;
    float: left;
    width: 10px;
    margin-bottom: -1000px;  /* for making green bar as large as parent div */
    padding-bottom: 1000px; /* for making green bar as large as parent div */
    background-color: #a8fba6;
}

#ideas_box_main_content {
    display: inline-block;
    *display: inline;
    float: left;
    width: 100%;
    margin: 10px 0px 10px 20px;
}

#ideas_box_top {
    display: inline-block;
    *display: inline;
    float: left;
    width: 100%;
    overflow: hidden;
}

#ideas_box_top_image {
    display: inline-block;
    *display: inline;
    float: left;
    width: 60px;
}

#ideas_box_top_titlebar {
    display: inline-block;
    *display: inline;
    float: left;
}

#ideas_box_top_titlebar_title {
    display: inline-block;
    *display: inline;
    float: left;
    width: 100%;
    padding: 5px 0px 0px 0px;
    color: #060708;
    font-family: "Arial";
    font-size: 150%;
}

#ideas_box_top_titlebar_postInfo {
    display: inline-block;
    *display: inline;
    float: left;
    width: 100%;
    color: #363636;
    font-family: "Arial";
    font-style: italic;
    font-size: 80%;
}

#ideas_box_top_iconBar {
    display: inline-block;
    *display: inline;
    float: right;
    width: 150px;
    padding-right: 30px;
}

#ideas_box_top_iconBar_comment {
    display: inline-block;
    *display: inline;
    float: left;
    width: 50px;
    text-align: center;
    color: #060708;
    font-family: "Arial";
}

#ideas_box_top_iconBar_thumbsUp {
    display: inline-block;
    *display: inline;
    float: left;
    width: 50px;
    text-align: center;
    color: #060708;
    font-family: "Arial";
}

#ideas_box_top_iconBar_thumbsDown {
    display: inline-block;
    *display: inline;
    float: left;
    width: 50px;
    text-align: center;
    color: #060708;
    font-family: "Arial";
}

#ideas_box_content {
    float: left;
    overflow: hidden;
    color: black;
    font-family: "Arial";
    font-size: 100%;
    margin-right: 40px;
}


#comments_dropDown_box_point {
    display: none;

    width: 20px;
    height: 14px;
    position: relative;

    left: 13px;
    top: 3px;

    background:url('../img/box_point.png'); 

    z-index: 10;
}

#comments_dropDown_box {
    display: none;

    position: relative;
    width: 70px;
    color: black;
    background-color: white;
    border: solid 1px #C2C2C2;
    overflow: auto;

    left: -13px;
    top: 2px;

    z-index: 9;

    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-top-right-radius:6px;
    -webkit-border-top-left-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -webkit-border-bottom-right-radius:6px;

    border: solid 1px #C2C2C2;
    box-shadow: 3px 3px 3px #cecdcd;
    -moz-box-shadow: 3px 3px 3px #cecdcd;
    -webkit-box-shadow: 3px 3px 3px #cecdcd;
}

#comments_dropDown_box .comments_dropDown_row {
    float: left;
    width: 100%;
    overflow: auto;
    text-align: center;
    padding: 5px 0px 5px 0px;
    font-style: italic;
}

#comments_dropDown_box .dropDown_divider {
    float: left;
    width: 100%;
    height: 2px;
    background-color: #dfdede;
}

$(document).ready(function() {

    $("#ideas_box_top_iconBar_comment").click(function()
    {
        $("#comments_dropDown_box").toggle();
        $("#comments_dropDown_box_point").toggle();
    });


});
HTML代码是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="application/xml; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<html lang="en">
<head>

    <!-- JQUERY -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/scripts_ideaboard.js"></script>

    <!-- CSS -->
    <link type="text/css" href="css/ideaboard.css" rel="stylesheet"  media="screen">

</head>

<body>

    <!-- LIST -->
    <div id="ideas_box">
        <div id="ideas_box_majority_bar_green"></div>
        <div id="ideas_box_main_content">
            <div id="ideas_box_top">
                <div id="ideas_box_top_image"></div>
                <div id="ideas_box_top_titlebar">
                    <div id="ideas_box_top_titlebar_title">Test</div>
                    <div id="ideas_box_top_titlebar_postInfo">Test on Aug 09 2017, 08:37:58pm</div>
                </div>
                <div id="ideas_box_top_iconBar">
                    <div id="ideas_box_top_iconBar_comment">
                        <img src="img/comments.jpg" style="height: 40px; width: 40px;"><br>
                        +8
                        <!-- display drop down for comments -->
                            <div id="comments_dropDown_box_point"></div>
                            <div id="comments_dropDown_box">
                                <div class="comments_dropDown_row">
                                    User1
                                </div>
                                <div class="dropDown_divider"></div>
                                <div class="comments_dropDown_row">
                                    User2
                                </div>
                                <div class="dropDown_divider"></div>
                                <div class="comments_dropDown_row">
                                    User3
                                </div>
                            </div>
                        <!-- END display drop down for comments -->
                    </div>
                    <div id="ideas_box_top_iconBar_thumbsUp">
                        <img src="img/like.jpg" style="height: 40px; width: 40px;"><br>
                        +3
                    </div>
                    <div id="ideas_box_top_iconBar_thumbsDown">
                        <img src="img/dislike.jpg" style="height: 40px; width: 40px;"><br>
                        -2
                    </div>
                </div>
            </div>
            <div id="ideas_box_content">
            This is a test
            </div>
        </div>
    </div>

    <!-- LIST -->
    <div id="ideas_box">
        <div id="ideas_box_majority_bar_green"></div>
        <div id="ideas_box_main_content">
            <div id="ideas_box_top">
                <div id="ideas_box_top_image"></div>
                <div id="ideas_box_top_titlebar">
                    <div id="ideas_box_top_titlebar_title">Test</div>
                    <div id="ideas_box_top_titlebar_postInfo">Test on Aug 09 2017, 08:37:58pm</div>
                </div>
                <div id="ideas_box_top_iconBar">
                    <div id="ideas_box_top_iconBar_comment">
                        <img src="img/comments.jpg" style="height: 40px; width: 40px;"><br>
                        +8
                        <!-- display drop down for comments -->
                            <div id="comments_dropDown_box_point"></div>
                            <div id="comments_dropDown_box">
                                <div class="comments_dropDown_row">
                                    User1
                                </div>
                                <div class="dropDown_divider"></div>
                                <div class="comments_dropDown_row">
                                    User2
                                </div>
                                <div class="dropDown_divider"></div>
                                <div class="comments_dropDown_row">
                                    User3
                                </div>
                            </div>
                        <!-- END display drop down for comments -->
                    </div>
                    <div id="ideas_box_top_iconBar_thumbsUp">
                        <img src="img/like.jpg" style="height: 40px; width: 40px;"><br>
                        +3
                    </div>
                    <div id="ideas_box_top_iconBar_thumbsDown">
                        <img src="img/dislike.jpg" style="height: 40px; width: 40px;"><br>
                        -2
                    </div>
                </div>
            </div>
            <div id="ideas_box_content">
            This is a test
            </div>
        </div>
    </div>

</body>
这里有一个实时版本：（点击第一篇文章中的评论图标）

任何帮助都将不胜感激。

正如我在评论中提到的-您必须对其余代码进行更多的重新格式化，以使其完全按照您的需要工作，但我有一些时间，所以我想我将向您展示如何使整个
位置：相对
和
位置：绝对

首先，我将所有ID更改为类，并删除父元素上的
溢出：隐藏
——如果此项处于活动状态，则无法从div中弹出“工具提示”。这当然会破坏绿线的工作方式，但它允许我们使工具提示正常工作

之后，我将
position:relative
添加到您的
.ideas\u box\u top\u iconBar\u comment
，因为这将是工具提示箭头的父类

然后，我将工具提示箭头和菜单包装在一个
.comments\u dropDown\u boxWrapper
中，并具有以下css：


.comments_dropDown_boxWrapper { 
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}


然后，在对javascript进行一些更改以使用新的包装器类之后，我们就可以让它工作了

这是jsfiddle，您可以看到它的全部功能。这不是一个一步一步解决你正在做的事情，但我希望它能给你足够的帮助你自己解决它

jsFiddle：

正如我在评论中提到的-您必须对其余代码进行更多的重新格式化，以使其完全按照您的需要工作，但我有一些时间，所以我想我应该向您展示如何使整个
位置：相对的
和
位置：绝对的

首先，我将所有ID更改为类，并删除父元素上的
溢出：隐藏
——如果此项处于活动状态，则无法从div中弹出“工具提示”。这当然会破坏绿线的工作方式，但它允许我们使工具提示正常工作

之后，我将
position:relative
添加到您的
.ideas\u box\u top\u iconBar\u comment
，因为这将是工具提示箭头的父类

然后，我将工具提示箭头和菜单包装在一个
.comments\u dropDown\u boxWrapper
中，并具有以下css：


.comments_dropDown_boxWrapper { 
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}


然后，在对javascript进行一些更改以使用新的包装器类之后，我们就可以让它工作了

这是jsfiddle，您可以看到它的全部功能。这不是一个一步一步解决你正在做的事情，但我希望它能给你足够的帮助你自己解决它

jsFiddle：

将其设置为
位置：绝对
，然后执行
z-index:1
将其设置为
位置：绝对
，然后执行
z-index:1
您完全正确，问题与位置：相对和位置：绝对有关。但目前，它看起来像是在利用溢出：隐藏在某些父元素（#ideas_box和#ideas_box_top_iconBar）上。你需要重新格式化你的css，这样你就不需要溢出：隐藏。否则，您将无法将“工具提示”div从div中“溢出”。它们只会被隐藏。此外，需要注意的是，您每页只需要一个“id”。目前，您似乎会经常重复
想法。\u box
。非常感谢您的帮助，工作非常顺利！当然如果我下面的回答是有帮助的，那么继续，把你的问题标记为已回答。你完全正确，这个问题与位置：相对和位置：绝对有关。但目前，它看起来像是在利用溢出：隐藏在某些父元素（#ideas_box和#ideas_box_top_iconBar）上。你需要重新格式化你的css，这样你就不需要溢出：隐藏。否则，您将无法将“工具提示”div从div中“溢出”。它们只会被隐藏。此外，需要注意的是，您每页只需要一个“id”。目前，您似乎会经常重复
想法。\u box
。非常感谢您的帮助，工作非常顺利！当然如果我下面的答案是有帮助的，请继续并将您的问题标记为已回答。