想要在用户点击链接时使用jquery在链接下显示div

i have link and one div. i want to show the div just under the link when user click on the link. i want to position div just under the link by code means div's top & left will be set by code according to the top & left position of the link. need help.

我有链接和一个div。我想在用户点击链接时在链接下显示div。我想通过代码将div放在链接下面,这意味着div的top和left将根据链接的顶部和左侧位置由代码设置。需要帮忙。

<a id="link">About</a>

<div id="submenu">
     <a href="#">About the company</a><br />
     <a href="#">Careers</a>
</div>

this way i do it here is my full code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<style type="text/css">
    a#link
    {
        background: #CCC;
        padding: 10px;
        cursor: pointer;
        margin-left: 600px;
        margin-top: 200px;
        position: absolute;
    }

    a#link1
    {
        background: #CCC;
        padding: 10px;
        cursor: pointer;
        margin-left: 600px;
        margin-top: 250px;
        position: absolute;
    }

    div#submenu
    {
        background: #fff;
        position: absolute;
        top: -12px;
        left: -20px;
        z-index: 100;
        width: 165px;
        display: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
        border:5px solid;
        border-color:#F1F2F2;
        z-index:9999;
    }

    div#submenu li a
    {
        color: #555555;
        display: block;
        font-family: arial;
        font-weight: bold;
        padding: 6px 15px;
        cursor: pointer;
        text-decoration: none;
    }

    div#submenu li a:hover
    {
        background: #39B54A;
        color: #FFFFFF;
        text-decoration: none;
    }

    .root
    {
        list-style: none;
        margin: 0px;
        padding: 0px;
        padding: 11px 0 0 0px;
        border-top: 1px solid #dedede;
    }
</style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#link").click(function () {
                $('#submenu').insertAfter($('#link'));
                $('#submenu').css({ left: $(this).offset().left + 'px',
                    top: ($(this).offset().top + $(this).outerHeight()) + 'px',
                    position: "absolute"
                });

                toggleVisibility();
                false;
            });

            $("html").click(
              function (e) {
                  if (e.target.id != "link" && e.target.id != "submenu"
                        && e.target.className != "root"
                        && e.target.className != "mainli" 
                        && e.target.className != "atag") {
                      $('div#submenu').fadeOut();
                  }
              });

            function toggleVisibility() {
                var submenu = $('div#submenu');
                if (submenu.is(":visible")) {
                    submenu.fadeOut();
                } else {
                    submenu.fadeIn();
                }
            }

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <a id="link">About</a>
    <a id="link1">My Test</a>
    <div id="submenu">
        <ul  class="root">
            <li class="mainli"><a class="atag" href="http://www.bba-reman.com">Ship with UPS</a></li>
            <li class="mainli"><a class="atag" href="http://www.bba-reman.com">Ship with FedEx</a></li>
        </ul>
    </div>
    </form>
</body>
</html>

2 个解决方案

#1

For displaying the <div> under your link you can do the following:

要在链接下显示

,您可以执行以下操作:

$('#link').click(function() {
    $('#submenu').css({
        left: $(this).offset().left + 'px',
        top: ($(this).offset().top + $(this).height()) + 'px'
    }).show();
});

And in your CSS:

在你的CSS中:

#submenu {
    position: absolute;
}

#2

this code may help you

这段代码可以帮到你

$("#link").click(function () {
       $('#submenu').insertAfter($('#link'));
        $('#submenu').css({left: $(this).offset().left + 'px',
                           top: ($(this).offset().top + $(this).height()) + 'px',
                           position: "absolute"
        }).show();
    });

#1