Question

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

我试图将'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>

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

jQuery UI accordion docs

修改

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

$(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;">

jQuery Accordion - 打开第一个切片

3 个答案: