Javascript jQuery切换底部div以向左而不是向右显示
我知道这一定是一个简单的解决办法,但我花了一上午的大部分时间试图找到一个解决方案(在这里发布之前),但没有任何效果 我有一个非常简单的jQuery“slideToggle”脚本,当单击它时,它会将一个div滑动到按钮的底部,达到我希望它显示的高度。它适合我想要的宽度(400px),从顶部div大小(130px)的左侧开始,向右延伸。问题是,我需要它向左拉伸(顶部的“按钮”设置在页面的最右侧,它从页面向外拉伸)。 以下是我的代码:Javascript jQuery切换底部div以向左而不是向右显示,javascript,jquery,css,Javascript,Jquery,Css,我知道这一定是一个简单的解决办法,但我花了一上午的大部分时间试图找到一个解决方案(在这里发布之前),但没有任何效果 我有一个非常简单的jQuery“slideToggle”脚本,当单击它时,它会将一个div滑动到按钮的底部,达到我希望它显示的高度。它适合我想要的宽度(400px),从顶部div大小(130px)的左侧开始,向右延伸。问题是,我需要它向左拉伸(顶部的“按钮”设置在页面的最右侧,它从页面向外拉伸)。 以下是我的代码: <script src="js/jquery-1.9.1
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<style type="text/css">
#cartBox {
width: 110px;
height: 90px;
position: absolute;
margin-left: 90%;
top: 28px;
border: 3px solid #800000;
background-color: #800000;
border-radius: 12px;
z-index: 999;
}
#cartDropMenu {
position:absolute;
z-index:999;
width: 130px; /* width of top items (img + text (Cart Items) */
float:right;
top: 0px;
right: 0px;
color: white;
font-family: Arial, Helvetica, Sans serif;
font-size: 12px;
text-align: left;
}
#cartDropMenu p {
margin:0;
padding-left:24px; /* moves text to the left of img */
cursor:pointer;
background-image:url('../img/open.png');
background-position:left; /* positions image to the left or right 300px(cartDropMenu width parameter) */
background-repeat:no-repeat;
text-align: left;
}
#cartDropMenu p.close {
background-image:url('../img/close.png');
}
#DropMenu {
position:absolute;
z-index:999;
background-color:#fff;
border:solid 1px rgb(220,220,220);
padding:12px;
width:400px; /* width of drop down box */
box-shadow:1px 1px 4px rgb(220,220,220);
top:90px; /* position of start point for drop down box */
left:8000; /* ??? */
display:none;
color: black;
font-family: Arial, Helvetica, Sans serif;
font-size: 12px;
}
</style>
<script>
$(document).ready(function() {
$('#cartDropMenu p').click(function() {
$('#DropMenu').slideToggle(300);
$(this).toggleClass('close');
});
}); // end ready
</script>
</head>
<body>
<div id="cartBox">
<div id="cartDropMenu">
<p>      Display Cart</p>
<div id="DropMenu">
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
Test line #1<br />
</div>
</div>
</div>
</body>
</html>
#车箱{
宽度:110px;
高度:90px;
位置:绝对位置;
左缘:90%;
顶部:28px;
边框:3倍实心#800000;
背景色:#800000;
边界半径:12px;
z指数:999;
}
#购物车菜单{
位置:绝对位置;
z指数:999;
宽度:130px;/*顶部项目的宽度(img+文本(购物车项目)*/
浮动:对;
顶部:0px;
右:0px;
颜色:白色;
字体系列:Arial、Helvetica、无衬线字体;
字体大小:12px;
文本对齐:左对齐;
}
#卡德洛普菜单{
保证金:0;
左填充:24px;/*将文本移动到img的左侧*/
光标:指针;
背景图像:url('../img/open.png');
背景位置:左侧;/*将图像定位到左侧或右侧300px(cartDropMenu宽度参数)*/
背景重复:无重复;
文本对齐:左对齐;
}
#cartDropMenu p.close{
背景图像:url('../img/close.png');
}
#下拉菜单{
位置:绝对位置;
z指数:999;
背景色:#fff;
边框:实心1px rgb(220220);
填充:12px;
宽度:400px;/*下拉框的宽度*/
盒影:1px 1px 4px rgb(220220);
顶部:90px;/*下拉框起点位置*/
左:8000;/**/
显示:无;
颜色:黑色;
字体系列:Arial、Helvetica、无衬线字体;
字体大小:12px;
}
$(文档).ready(函数(){
$('#cartDropMenu p')。单击(函数(){
$('DropMenu')。滑动切换(300);
$(this.toggleClass('close');
});
})//结束准备就绪
显示购物车
测试线#1
测试线#1
测试线#1
测试线#1
测试线#1
测试线#1
测试线#1
测试线#1
以下是JFIDLE的链接:
尝试将
右键:0;
添加到#下拉菜单将右键:0;
添加到#下拉菜单
。这将使下拉菜单从右端开始
显示购物车
p
标签。非常感谢您-这非常有效!!!正如您所知,我仍在学习,这是我在这里的第一篇帖子-我花了5分钟才将代码正确显示在我的帖子中并添加jFiddle链接!@user3018152祝您学习顺利。堆栈溢出是学习和清除错误的最佳场所问题:)