Question

我在mootools滑块中有一个自定义下拉框，如下图所示。此滑块包含三个div，可以逐个自动垂直旋转。滑块和自定义下拉列表的javascript和css如下所述。我的问题是，当我将下拉列入滑块div时，隐藏在滑块div后面，如下图所示。根据要求，我不能改变下拉位置而不是增加滑块高度，那么如何在顶部滑块上显示下拉列表项。任何建议将不胜感激。

enter image description here

现在您可以看到上面的图像每单位成本下拉列表隐藏在滑块容器后面。

Slider mootools

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);
}

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

提前致谢！

Answer 1

如果某些内容无法在HTML中显示，通常是由于溢出：隐藏的css属性设置在其中一个父母身上。

似乎问题就在于此 - 尝试删除隐藏包含下拉元素的父元素的溢出。

如果您需要溢出：隐藏，那么还有其他方法可以创建该效果，因此如果您使用http://jsfiddle.net/或其他内容发布完整代码真的有帮助...

Answer 2

您可以将滑块放在iframe中吗？可能有更复杂的补救措施，但这总是有效的。

隐藏在mootools滑块后面的下拉列表

2 个答案: