如何为每个在其上打开菜单的列表项创建一个按钮？答案

【问题标题】：How to create a button to every list item which opens a menu over it?如何为每个在其上打开菜单的列表项创建一个按钮？
【发布时间】：2015-02-22 15:57:15
【问题描述】：

我正在构建一个类似于 Android 的“Play Market”的移动响应式网页。我有一个 div 列表，其中有一个按钮。每个按钮都会打开一个带有唯一链接的 div。

如何在不以不同方式定位每个 div 的情况下以有效的方式创建这样的东西？

这是我的 JSfiddle：http://jsfiddle.net/e0byofe2/

我尝试在菜单中使用position: relative; 属性 - 它使 div 中的元素变得一团糟。

我尝试使用position: absolute;，这没问题，但我无法以全局方式将菜单定位在每个 div 上。

HTML：

<div class="main">

    <div id="header-wrap">
        <div id="header" class="clear">
            <img src="arrow.jpg" />
            <img src="search.jpg" style="float: right;" />
        </div>
    </div>

    <div class="content">
        <div id="apps-header">Apps</div>
        <div class="line"></div>
        <div class="apps">


            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                </div>
            </div>

            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                </div>
            </div>

            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                    <div style="width: 202px; height: 106px; border: 1px solid grey; position: relative; ">

                    </div>
                </div>
            </div>

            <div class="app">
                <img src="app_icon1.jpg" class="app_icon" />
                <div class="app_info">
                    <div class="app_name">text text text</div>
                    <div class="app_comp">text </div>
                    <div class="stars">
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="star.png" />
                        <img src="hstar.png" />
                    </div>  
                    <div class="free">FREE</div>
                </div>
                <div style="float: left;">
                    <img src="3dots.png" class="dots"/>
                </div>
            </div>







        </div>


    </div>






</div>

CSS：身体{ 边距：0；高度：100%； }

.main{
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

#header-wrap {
    width: 100%;
    position: fixed;
    background-color: #689f38;
    height: 62px;
}

#header {
    width: 100%;
    position: absolute;
    bottom: 0;
    box-shadow: 0px 0px 19px rgb(10, 29, 90);
    -webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
    -moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
}


.content{
    padding-top: 80px;
    width: 100%;
    /*height: 100%;*/
    background-color: #eeeeee;
}

#apps-header{
    margin-left: 10px;
    font-family: arial;
    background-image: url('triangle.png');
    background-position: bottom;
    width: 86px;
    background-repeat: no-repeat;
    background-size: 10px;
}

.line{
    width: 100%;
    height: 2px;
    background-color: #458b09;
    margin-top: 10px;
}

.apps{
    width: 100%;
    /*border: 1px solid black;*/
    padding-top: 10px;
    height: 100%;
}

.app{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 0px 6px rgb(145, 145, 145);
    -webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
    -moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
    background-color: #fafafa;
    padding: 10px 8px;
    margin: 5px 8px;
    display: inline-table; /******/
}

.app_icon{
    width: 83px;
    height: 83px;
    float: left;
}

.app_info{
    /*border: 1px solid red;*/
    float: left;
    width: 210px;
    height: 81px;
    padding-left: 20px;
}

.app_name{
    font-family: arial;
    font-size: 18px;

}

.app_comp{
    font-family: arial;
    font-size: 16px;    
    color: #595959;
}

.stars img{
    float: left;
    width: 14px; 
    height: 14px;
}

.free{
    color: #69a03a;
    font-family: arial;
    position: relative;
    bottom: -25px;
    left: 105px;
    font-size: 14px;
}

.3dots{
    height: 25px;
}

我能给你的最好的例子是，当你在 Android 上打开“Play Market”并搜索一个随机应用时，你会得到一堆应用 div 结果。单击右上角的 3 个点时 - 它会在特定应用程序 div 上打开一个包含 2 个项目的列表。

应该是这样的：

当您选择另一个应用程序并按下角落的 3 个点时，您会得到相同的列表，其中包含 2 个选项，但位于应用程序 div 之上。

【问题讨论】：

在小提琴中展示你的例子。
你的问题很难理解，你能画个图或者举个例子吗？
我更新了我的帖子@SleekGeek
应该如何仅从图像帮助您排除故障？还有几行文字？
@charlietfl 我添加了代码...

标签： javascript jquery html css

【解决方案1】：

我已经稍微改变了你的结构，并使用 jquery 将“点”图像作为菜单的按钮

HTML：

<img src="3dots.png" class="dots"/>
<div class="dots_menu">
    <a href="#">link 1</a>  
    <a href="#">link 2</a>  
</div>

CSS：

.app
{
    position: relative;
}

.dots
{
    float: right;   
}

.dots_menu
{
    display: none;
    width: 202px;
    position: absolute;
    top: 35px;
    right: 0;
    z-index: 1;
    background: rgb(238, 238, 238);
    -webkit-box-shadow: 0px 4px 15px #000;
    -moz-box-shadow: 0px 4px 15px #000;
    box-shadow: 0px 4px 15px #000;
}

.dots_menu.show
{
    display: block;
}

.dots_menu a
{
    display: block;
    text-decoration: none;
    color: #000;
    padding: 10px;
}

JQuery:

$(document).ready(function(){
    $('.dots').click(function(){
        $('.dots_menu').removeClass('show');
        $(this).next().addClass('show');
    });        
});

示例：http://jsfiddle.net/e0byofe2/3/

这就是你要找的吗？

【讨论】：

是的！户田！我现在明白了在相对位置中使用绝对位置的概念！ :)
嗨，老兄，代码还是一样的，你能看看这个吗？ stackoverflow.com/questions/27648189/…