1

我想在加载时显示这个手风琴的第一个“切片”。即我希望在页面加载时默认打开第一张幻灯片。

我试图将'display：block'添加到ul，但没有运气

/* Vertical Accordion Style */
.va-container{
    position:relative;
    margin:40px auto 0 auto;
        top: -47px;
        left: 0px;
        width: 100%;
}         
.va-wrapper{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
    background:#000;
        left: 0px;
}
.va-slice{
    cursor:pointer;
    position:absolute;
    width:100%;
    left:0px;
    overflow:hidden;
}
.va-slice-1{
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/Airfreight22.png) no-repeat center center;
}
.va-slice-2{
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/Seafreight2.png) no-repeat center center;
}
.va-slice-3{
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/Satellite.png) no-repeat center center;
}
.va-slice-4{
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/41.jpg) no-repeat center center;
}
.va-slice-5{
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/41.jpg) no-repeat center center;
}
.va-slice-6{
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/41.jpg) no-repeat center center;
}
.va-slice-7{
    background:#000 url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/41.jpg) no-repeat center center;
}
.va-slice-color-1{
    background-color:#97c5eb;
}
.va-slice-color-2{
    background-color:#68ace5;
}
.va-slice-color-3{
    background-color:#0072cf;
}
.va-slice-color-4{
    background-color:#0039a6;
}
.va-slice-color-5{
    background-color:#00338e;
}
.va-slice-color-6{
    background-color:#002c76;
}
.va-slice-color-7{
    background-color:#002144;
}
.va-title{
    font-family: 'Open Sans Condensed', sans-serif;
    text-transform:uppercase;
    font-size:40px;
    margin-left:20px;
    color:#fff;
    text-shadow: 0px 0px 1px white;
}
.va-content{
    display:none;
    margin-left:25px;


}
.va-slice p{
    font-size: 22px;
    font-style: italic;
    font-family:Georgia, serif;
}
.va-slice ul{
    margin-top:20px;
}
.va-slice ul li{
    float:left;
    margin:0px 2px;
}
.va-slice ul li a{
    color:#000;
    background:#eede2f;
    padding:3px 6px;
    font-size:14px;
    font-family:'PT Sans', sans-serif;
    text-transform:uppercase;
}
.va-slice ul li a:hover{
    background:#000;
    color:#fff;
    text-shadow:none;
}
.va-nav span{
    width:40px;
    height:25px;
    background:transparent url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/prev.png) no-repeat center center;
    position:absolute;
    top:-35px;
    left:50%;
    margin-left:-20px;
    text-indent:-9000px;
    opacity:0.7;
    cursor:pointer;
    display:none;
    z-index:100;
}
.va-nav span.va-nav-next{
    background-image:url(http://www.fsi.lookinside.co.za/wp-content/uploads/2013/04/next.png);
    top:auto;
    bottom:-35px;
}
.va-nav span:hover{
    opacity:1.0;
}

/* End Additional CSS Styles */

<div class="container">

            <div id="va-accordion" class="va-container">
                <div class="va-nav">
                    <span class="va-nav-prev">Previous</span>
                    <span class="va-nav-next">Next</span>
                </div>
                <div class="va-wrapper">
                    <div class="va-slice va-slice-1">
                        <div class="va-title">Airfreight</div>
                        <div class="va-content">
                            <p>Henry Watson</p>
                            <ul>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="va-slice va-slice-2">
                        <div class="va-title">Seafreight</div>
                        <div class="va-content">
                            <p>Keith Johnson</p>
                            <ul>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>  
                    </div>
                    <div class="va-slice va-slice-3">
                        <div class="va-title">Satellite Tracking</div>
                        <div class="va-content">
                            <p>Andrew Alaniz</p>
                            <ul>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>  
                    </div>
                    <div class="va-slice va-slice-4">
                        <div class="va-title">Guarding</div>
                        <div class="va-content">
                            <p>Ben Freeman</p>
                            <ul>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>  
                    </div>
                    <div class="va-slice va-slice-5">
                        <div class="va-title">Machine Moving</div>
                        <div class="va-content">
                            <p>Alex Schuman</p>
                            <ul>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>  
                    </div>
                    <div class="va-slice va-slice-6">
                        <div class="va-title">Investigations</div>
                        <div class="va-content">
                            <p>Maria Wales</p>
                            <ul>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>  
                    </div>
                    <div class="va-slice va-slice-7">
                        <div class="va-title">Transport</div>
                        <div class="va-content">
                            <p>Paul White</p>
                            <ul>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>  
                    </div>
                </div>
            </div>

        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="wp-content/themes/FSI5/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="wp-content/themes/FSI5/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="wp-content/themes/FSI5/jquery.vaccordion.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#va-accordion').vaccordion({
                    visibleSlices   : 5,
                    expandedHeight  : 250,
                    animOpacity     : 0.1,
                    contentAnimSpeed: 100
                });
            });
        </script>
4

3 回答 3

3

你在使用 JQuery UI 手风琴吗？如果你是你可以指定参数“active：true”来实例化你的手风琴，它实际上在 JQueryUI 中默认展开。如果您不使用 jQuery UI 手风琴，您是否有不能使用的原因？

于 2013-04-13T21:05:38.527 回答
3

我不知道这个插件，所以我没有记录的解决方案。在类似情况下总是对我有用的是：

$(".va-slice-1").click()

在初始化手风琴后运行它。

于 2013-04-13T21:21:21.713 回答
2

active在附加手风琴行为时设置选项

$( ".selector" ).accordion({ active: 1 });

jQuery UI 手风琴文档

编辑

您使用的插件不接受默认选项，它通过 javascript 将 css 高度添加到内联元素。要默认打开切片，可以触发 javascript click 事件。

$(document).ready(function() {
  $('.va-slice:first').trigger('click.vaccordion');
});

或者，尝试data-expanded在元素内联上添加属性和默认样式。

<div data-expanded="true" class="va-slice va-slice-2" style="top: 0px; height: 350px; opacity: 1;">
于 2013-04-13T21:02:55.060 回答