下拉按钮怎么实现,类似网易邮箱上面那一排

ladofwind 2011-08-16 10:22:01

比如按钮为 "标记为",点上去下拉有"已读","未读"

...全文

99 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiage 2011-09-01

打赏
举报

[Quote=引用 5 楼 tzg157 的回复:]
<html>
<style type="text/css">
div{
cursor:pointer;
}
li{
list-style:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascri……
[/Quote]
5楼的不符合条件呢,你在下面两句中加上<br/>就知道咯!!!
<div id="mark" onclick="show()"/>标记为</div>
<ul id="state" style="border:1px solid #333;display:none;width:50px;height:50px;">
你没法确定实际开发中,那个ul是紧挨着上面的div的.

xiage 2011-08-16

打赏
举报

下面是模拟163的那个例子,原理就是找到你点击的那个图片的位置,然后让div在那个位置显示就可以了.





<script>



    // 获取页面元素的Y 坐标

    function GetTop(id) {

        var obj = document.getElementById(id);

        if (!obj) return 0;

        var top = 0;

        while (obj) {

            top += obj.offsetTop;

            obj = obj.offsetParent;

        }

        return top;

    }

    // 获取页面元素的X 坐标

    function GetLeft(id) {

        var obj = document.getElementById(id);

        if (!obj) return 0;

        var left = 0;

        while (obj) {

            left += obj.offsetLeft;

            obj = obj.offsetParent;

        }

        return left;

    }



    function Show() {



        var divPanel = document.getElementById("divPanel");

        var divTargetHeight = document.getElementById("divTarget").style.height;

        divTargetHeight = divTargetHeight.replace("px", "");

        with (divPanel.style) {

            top = (GetTop("divTarget") + divTargetHeight*1) + "px";

            left = GetLeft("divTarget") + "px";

            position = "absolute";

            zIndex = 9999;

        }

        if (divPanel.style.display == "none") {

            divPanel.style.display = "block";

        }

        else {

            divPanel.style.display = "none";

        }



    }



</script>



<html>

<body>

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <div id="divTarget" style=" border: solid 1px blue; width: 100px; height: 30px; text-align:center; vertical-align:middle; " onclick="Show(); ">标记为

    </div>

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <div id="divPanel" style="list-style-type: none; display: none; border: solid 1px gray;">

        <ul>

            <li>已读</li>

            <li>未读</li>

        </ul>

    </div>

</body>

</html>

tzg157 2011-08-16

打赏
举报

<html>
<style type="text/css">
div{
cursor:pointer;
}
li{
list-style:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"/></script>
<script type="text/javascript">
$(function() {
$('li').bind('click',function() {
$('#mark').html($(this).html());
$('#state').hide(100);
});
})
function show() {
$('#state').show(100);
}
</script>
<body>
<div id='main'>
<div id="mark" onclick="show()"/>标记为</div>
<ul id="state" style="border:1px solid #333;display:none;width:50px;height:50px;">
<li>已读</li>
<li>未读</li>
</div>
</div>
</body>
</html>

ladofwind 2011-08-16