下拉隐藏在jquery silder后面 [英] dropdown hide behind jquery silder
问题描述
我在jQuery滑块中有一个自定义下拉框，如下图所示。此滑块包含三个div，可以逐个自动垂直旋转。滑块和自定义下拉列表的javascript和css如下所述。我的问题是，当我将下拉列入滑块div时，隐藏在滑块div后面，如下面的图像链接。根据要求，我不能改变下拉位置而不是增加滑块高度，那么如何在顶部滑块上显示下拉列表项。任何建议将不胜感激。
查看此链接以获取图像
现在你可以看到上面的图像每单位成本下拉列表隐藏在滑块容器后面。
Slider Jquery
http://code.google.com/p/locjoomla/source/browse/trunk/mootool/lofslidernews/js/lofslidernews.mt11.js [ ^ ]
http://mootools.net/download/get/mootools-1.2.4.js [ ^ ]
http://cnetjavascript.googlecode.com/files/mootools.svn.js [ ^ ]
I have a custom dropdown box in jQuery slider as per below image link. This slider contains three div, that auto rotate in vertically one by one. Slider’s and custom dropdown’s javascript and css described below. My problem is that, when I put dropdown into slider div that hide behind slider div as per below image link. According requirement, I can’t changed dropdown position and not increase slider height, then how to display dropdown list items on top off slider. Any suggestion will be appreciated.
Check this link for image
Now you can see above image Per Unit Cost drop down list is hiding behind slider container.
Slider Jquery
http://code.google.com/p/locjoomla/source/browse/trunk/mootool/lofslidernews/js/lofslidernews.mt11.js[^]
http://mootools.net/download/get/mootools-1.2.4.js[^]
http://cnetjavascript.googlecode.com/files/mootools.svn.js[^]
<script type="text/javascript">
var _lofmain = $('lofslidecontent45');
var _lofscmain = _lofmain.getElement('.lof-main-wapper');
var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
var object = new LofFlashContent(_lofscmain,
_lofnavigator,
_lofmain.getElement('.lof-navigator-outer'),
{ fxObject: { transition: Fx.Transitions.Quad.easeInOut, duration: 800 },
interval: 3000,
direction: 'vrdown'
});
object.start(true, _lofmain.getElement('.preload'));
var isCustom = "@(ViewBag.IsCustom)";
if (isCustom == "True") {
object.callMyEvent(2, true); // call my custom event
object.setNavActive(2);
}
</script>
Slider CSS
Slider CSS
/* CSS Document */
.lof-slidecontent
{
margin-left: 0px;
position: relative;
overflow: hidden;
width: 1200px;
height: 486px;
}
.lof-slidecontent .preload
{
height: 100%;
width: 100%;
background: #FFF;
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: #FFF;
text-align: center;
}
.lof-slidecontent .preload div
{
height: 100%;
width: 100%; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
}
/* main flash */
.lof-main-wapper
{
margin-right: auto;
overflow: hidden; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
padding: 0px;
height: 488px;
width: 1014px;
position: relative;
overflow: hidden;
}
.lof-main-wapper .lof-main-item
{
padding: 0px;
margin: 0px;
height: 488px;
width: 100%;
position: absolute;
}
.lof-main-wapper .lof-main-item img
{
padding: 0px;
width: 100%;
}
.lof-main-item-desc
{
z-index: 100px;
position: absolute;
top: 150px;
left: 50px;
width: 400px;
background: url(../images/transparent_bg.png); /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p
{
color: #FFF;
margin: 0 8px;
padding: 8px 0;
}
.lof-main-item-desc h3 a
{
color: #FFF;
margin: 0;
font-size: 140%;
padding: 20px 8px 2px;
font-family: "Trebuchet MS" ,Trebuchet,Arial,Verdana,sans-serif;
}
/* item navigator */
ul.lof-navigator
{
top: 0px;
padding: 0px;
margin: 0px;
position: absolute;
width: 100%;
overflow: hidden;
}
ul.lof-navigator li
{
cursor: hand;
cursor: pointer;
list-style: none;
width: 100%;
padding: 0px;
margin: 0px;
}
.lof-navigator-outer
{
position: absolute;
right: 0;
top: 0px;
z-index: 100;
height: 488px;
width: 204px;
padding: 0px;
margin: 0px;
float: left;
}
.lof-navigator li.active
{
background: url(../../Images/MyImages/Icons/arrow-bg2.png) no-repeat;
background-color: #d21c1c;
color: #FFF;
}
.lof-navigator li:hover
{
}
.lof-navigator li div
{
text-align: center;
height: 162px;
position: relative;
margin-left: 0px;
padding-left: 0px;
background-color: #FFFFFF;
}
.lof-navigator li.active div
{
}
.lof-next
{
position: absolute;
top: 0;
height: 30px;
background: #F9F9F9;
display: block;
width: 100%;
}
.lof-previous
{
position: absolute;
bottom: 0;
height: 30px;
background: #F9F9F9;
display: block;
width: 100%;
}
.lof-navigator-MycontentHeader
{
font-family: Caecilia LT Std;
font-size: 26px;
color: #d21c1c;
}
li.active .lof-navigator-MycontentHeader
{
color: #FFF;
}
.lof-navigator-MycontentFooter
{
font-family: TradeGothic, Arial;
font-style: oblique;
font-size: 13px;
color: Black;
}
li.active .lof-navigator-MycontentFooter
{
color: #FFF;
}
下拉
http://www.mindstick.com/Articles/f649279c-dc3a-42cb-ab10-e24ae9a1bb90/?Stylish%20Dropdown%20in%20HTML [< a href =http://www.mindstick.com/Articles/f649279c-dc3a-42cb-ab10-e24ae9a1bb90/?Stylish%20Dropdown%20in%20HTML\"target =_ blanktitle =New Window> ^ ]
推荐答案
（' lofslidecontent45'）;
var _lofscmain = _lofmain.getElement（' .lof-主wapper'）;
var _lofnavigator = _lofmain.getElement（' .lof-navigator-outer .lof-navigator'）;
var object = new LofFlashContent（_lofscmain，
_lofnavigator，
_lofmain.getElement（' 。lof-navigator-outer'），
{fxObject：{转换：Fx.Transitions.Quad.easeInOut，持续时间： 800 }，
interval： 3000 ，
方向：' vrdown'
}）;
object.start（ true ，_ lofmain.getElement（' 预加载'））;
var isCustom = @（ViewBag.IsCustom）;
if （isCustom == True ）{
object.callMyEvent（ 2 ， true ）; // 调用我的自定义事件
object.setNavActive（ 2 ）;
}
< / script>
('lofslidecontent45'); var _lofscmain = _lofmain.getElement('.lof-main-wapper'); var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator'); var object = new LofFlashContent(_lofscmain, _lofnavigator, _lofmain.getElement('.lof-navigator-outer'), { fxObject: { transition: Fx.Transitions.Quad.easeInOut, duration: 800 }, interval: 3000, direction: 'vrdown' }); object.start(true, _lofmain.getElement('.preload')); var isCustom = "@(ViewBag.IsCustom)"; if (isCustom == "True") { object.callMyEvent(2, true); // call my custom event object.setNavActive(2); } </script>
Slider CSS
Slider CSS
/* CSS Document */
.lof-slidecontent
{
margin-left: 0px;
position: relative;
overflow: hidden;
width: 1200px;
height: 486px;
}
.lof-slidecontent .preload
{
height: 100%;
width: 100%;
background: #FFF;
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: #FFF;
text-align: center;
}
.lof-slidecontent .preload div
{
height: 100%;
width: 100%; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
}
/* main flash */
.lof-main-wapper
{
margin-right: auto;
overflow: hidden; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/
padding: 0px;
height: 488px;
width: 1014px;
position: relative;
overflow: hidden;
}
.lof-main-wapper .lof-main-item
{
padding: 0px;
margin: 0px;
height: 488px;
width: 100%;
position: absolute;
}
.lof-main-wapper .lof-main-item img
{
padding: 0px;
width: 100%;
}
.lof-main-item-desc
{
z-index: 100px;
position: absolute;
top: 150px;
left: 50px;
width: 400px;
background: url(../images/transparent_bg.png); /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p
{
color: #FFF;
margin: 0 8px;
padding: 8px 0;
}
.lof-main-item-desc h3 a
{
color: #FFF;
margin: 0;
font-size: 140%;
padding: 20px 8px 2px;
font-family: "Trebuchet MS" ,Trebuchet,Arial,Verdana,sans-serif;
}
/* item navigator */
ul.lof-navigator
{
top: 0px;
padding: 0px;
margin: 0px;
position: absolute;
width: 100%;
overflow: hidden;
}
ul.lof-navigator li
{
cursor: hand;
cursor: pointer;
list-style: none;
width: 100%;
padding: 0px;
margin: 0px;
}
.lof-navigator-outer
{
position: absolute;
right: 0;
top: 0px;
z-index: 100;
height: 488px;
width: 204px;
padding: 0px;
margin: 0px;
float: left;
}
.lof-navigator li.active
{
background: url(../../Images/MyImages/Icons/arrow-bg2.png) no-repeat;
background-color: #d21c1c;
color: #FFF;
}
.lof-navigator li:hover
{
}
.lof-navigator li div
{
text-align: center;
height: 162px;
position: relative;
margin-left: 0px;
padding-left: 0px;
background-color: #FFFFFF;
}
.lof-navigator li.active div
{
}
.lof-next
{
position: absolute;
top: 0;
height: 30px;
background: #F9F9F9;
display: block;
width: 100%;
}
.lof-previous
{
position: absolute;
bottom: 0;
height: 30px;
background: #F9F9F9;
display: block;
width: 100%;
}
.lof-navigator-MycontentHeader
{
font-family: Caecilia LT Std;
font-size: 26px;
color: #d21c1c;
}
li.active .lof-navigator-MycontentHeader
{
color: #FFF;
}
.lof-navigator-MycontentFooter
{
font-family: TradeGothic, Arial;
font-style: oblique;
font-size: 13px;
color: Black;
}
li.active .lof-navigator-MycontentFooter
{
color: #FFF;
}
Drop down
http://www.mindstick.com/Articles/f649279c-dc3a-42cb-ab10-e24ae9a1bb90/?Stylish%20Dropdown%20in%20HTML[^]
这篇关于下拉隐藏在jquery silder后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![查看此链接以获取图像](\"http://i.stack.imgur.com/kYd2A.jpg\"){kind=link}