想要在用户单击链接时使用jquery在链接下方显示div [英] Want to show div just under the link using jquery when user click on link
本文介绍了想要在用户单击链接时使用jquery在链接下方显示div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有链接和一个div.当用户单击链接时，我想在链接下方显示div.我想通过代码将div定位在链接下方，这意味着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.
<a id="link">About</a>
<div id="submenu">
<a href="#">About the company</a><br />
<a href="#">Careers</a>
</div>
这样我在这里做的就是我的完整代码
<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>
推荐答案
要在链接下显示<div>，您可以执行以下操作:
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();
});
在您的CSS中:
#submenu {
position: absolute;
}
这篇关于想要在用户单击链接时使用jquery在链接下方显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
