jQuery Accordion-打开第一个切片

我想展示手风琴的第一部分。ie我希望在加载页面时默认打开第一张幻灯片

我曾尝试在ul中添加“display:block”，但没有成功

/* 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>  

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

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

编辑

您正在使用的插件不接受默认选项，它通过javascript向内联元素添加css高度。要在默认情况下打开切片，可以触发javascript单击事件

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

或者，尝试在内联元素上添加数据扩展属性和默认样式

<div data-expanded="true" class="va-slice va-slice-2" style="top: 0px; height: 350px; opacity: 1;">

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

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

编辑

您正在使用的插件不接受默认选项，它通过javascript向内联元素添加css高度。要在默认情况下打开切片，可以触发javascript单击事件

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

或者，尝试在内联元素上添加数据扩展属性和默认样式

<div data-expanded="true" class="va-slice va-slice-2" style="top: 0px; height: 350px; opacity: 1;">

---

您正在使用jQueryUI手风琴吗？如果您是，您可以在实例化手风琴的地方指定参数active:true，它实际上在JQueryUI中默认展开。如果您没有使用jQuery UI accordion，有什么原因不能使用它吗

您正在使用JQuery UI手风琴吗？如果您是，您可以在实例化手风琴的地方指定参数active:true，它实际上在JQueryUI中默认展开。如果您没有使用jQuery UI accordion，有什么原因不能使用它吗

我不知道这个插件，所以我没有文档化的解决方案。 在类似情况下，对我来说最有效的方法是：

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

---

在初始化accordion之后运行它。

我不知道这个插件，所以我没有文档化的解决方案。 在类似情况下，对我来说最有效的方法是：

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

---

在初始化accordion之后运行它。

您正在使用jquery ui accordion小部件吗@ckundo不，我正在使用我在这里找到的东西你在使用jquery ui accordion小部件吗@不，我在用我在这里找到的东西谢谢你的回复。不，我使用的是我在这里找到的tympanus.net/codrops/2011/07/22/vertical-slide-accordion我对jquery不是很熟悉，选择本教程作为开始我真的建议选择jQueryUI的手风琴。它有大量的文档，如果您遇到问题，您会发现有很多人可以帮助您解决问题，并且它将为您在未来节省大量压力，因为您有一个完整的社区为其持续发展做出贡献。感谢您的回复。不，我使用的是我在这里找到的tympanus.net/codrops/2011/07/22/vertical-slide-accordion我对jquery不是很熟悉，选择本教程作为开始我真的建议选择jQueryUI的手风琴。它有大量的文档，如果你遇到问题，你会发现有很多人能够帮助你，这将为你在未来节省很多压力，因为你有一个完整的社区在为它的持续发展做出贡献。记录事件处理程序和数据属性的插件代码是，记录事件处理程序和数据属性的插件代码是谢谢你的回答，效果很好。我可以为我的导航菜单按钮上的各个片段触发此操作吗？如果我选择第二个导航菜单按钮打开第二个页面，我能让它在打开时触发第二个切片吗？我认为没有问题。这个调用只是告诉jQuery在用户单击后触发相同的作业。对于其他切片，请使用其他选择器名称或仅按表$$va切片[n]。单击；-其中n是片数。另外，本机单击调用也应该有效：$va slice[n]。单击-请注意，这不会触发jQuery的单击事件。-感谢您的回答，它非常有效。我可以为我的导航菜单按钮上的各个片段触发此操作吗？如果我选择第二个导航菜单按钮打开第二个页面，我能让它在打开时触发第二个切片吗？我认为没有问题。这个调用只是告诉jQuery在用户单击后触发相同的作业。对于其他切片，请使用其他选择器名称或仅按表$$va切片[n]。单击；-其中n是片数。本机的click调用也应该起作用：$va slice[n]。click-请注意，这不会通过jQuery触发click事件。