打开手风琴加载与活动类

Open accordion on load with active class

本文关键字：活动 加载 手风琴      更新时间：2023-09-26

我在我的网站上有一个手风琴，我希望手风琴在正确的水平上打开，这取决于活动类在哪里。我做了一个JSFiddle。

JS: 

$(document).ready(function ($) {
$('.servicesub').find('.servicesubitem').click(function () {
    if ($(this).next().is(':visible')) {
        //Collapse
        $(this).next().slideToggle('fast');
        $(this).removeClass('active');
       // $("#footer-wrapper").animate({marginTop: "0px"}, 'fast');
    } else {
        //Expand
        $(this).next().slideToggle('fast');
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        //hide other panels
        $(".servicesubli").not($(this).next()).slideUp('fast');
        //$("#footer-wrapper").animate({marginTop: "200px"}, 'fast');
    }
});


});
HTML: 

    <div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub" >
<li class="servicesubitem active">
                            <span class="subitem">Web Design,
                                <br>
                                Multimedia &amp; Email</span><span class="fa1 fa-globe"> </span>
                        </li>
                        <div class="servicesubli">
                            <ul>
                                <a href="domains.php">
                                <li>
                                    Domain Registration
                                </li>
                                </a>
                                <a href="webdesign.php">
                                <li>
                                    Web Design &amp; Development
                                </li>
                                </a>
                                <a href="webhosting.php">
                                <li>
                                    Web Hosting
                                </li>
                                </a>
                                <a href="email.php">
                                <li>
                                    Managed Email Systems
                                </li>
                                </a>
                            </ul>
                        </div>
                        <li class="servicesubitem">
                            <span class="subitem">Vessel
                                <br>
                                Security</span><span class="fa1 fa-lock"> </span>
                        </li>
                        <div class="servicesubli">
                            <ul>
                                <a href="tracking.php">
                                <li>
                                    Yacht Tracking
                                </li>
                                </a>
                                <a href="ssas.php">
                                <li>
                                    SSAS
                                </li>
                                </a>
                                <a href="#">
                                <li>
                                    SAT C
                                </li>
                                </a>
                            </ul>
                        </div>
                            </div>
CSS: 

* Service Sub */
.servicesub { padding:10px; }
.servicesub ul { list-style-type: none; padding: 0px; color: #fff;}
.servicesub li{ font-size: 14px; height: 70px; padding: 17px 0px 10px 20px; margin-top: 10px; text-transform: uppercase; }
.servicesub li a {text-decoration: none;}
.servicesub li a:hover {color:#fff;}
.servicesub li { background-color: #017CEB; }
.servicesub li:hover { background-color: #015BAC; }
.servicesub li.active { background-color: #015BAC; }
.servicesub span:after { color:#fff; font-family: FontAwesome; display: inline-block;  width: 1.2em; font-size: 40px; position: absolute; text-align: center; margin-top: -9px; }
#servicesub.stick { position: fixed; top: 80px; max-width: 293px; }
.subitem { color:#fff; height:58px; width: 215px; position: absolute; right: 10px; text-align: center; }
.servicesubitem { cursor: pointer; }
.servicesubli { cursor: pointer; display: none; }
.servicesubli.default { display: block; }
.servicesubli ul { width: 100%; font-size: 14px;}
.servicesubli li {  padding: 8px; margin-top: 1px; text-transform: uppercase; height: 35px; text-align: center;}
.servicesubli a { text-decoration: none; color: #fff; }
.servicesub .getintouch { background-color: #00539f; padding: 10px; height: auto;}
.servicesub .getintouch:hover { background-color: #00539f; }
.servicesub .getintouch h3 { color: #fff; text-align: center; }
.servicesub .getintouch p { color:#fff; text-align: center; }

正如你所看到的，手风琴可以点击，活动类(在这个演示中是手动设置的)就在那里，我只是想让它在页面加载时切换正确的手风琴部分。提前感谢。

要循环使用您的逻辑，您可以将您的.active类添加到您希望的任何元素，然后在ready时搜索.servicesubli.active。

<div class="servicesubli active">

$(function() {
    [...]
    $('.servicesubli.active').slideToggle('fast');
});

JSFiddle Link - demo

每个评论，如果你想瞄准servicesubitem.active，只需修改如下…

$('.servicesubitem.active').next('.servicesubli').addClass('active').slideToggle('fast');

JSFiddle Link - demo - .servicesubitem.active selector

你只需要在页面加载后触发click事件，如下所示:

$('.servicesub').find('.active').trigger( "click" );

查看此处的jsfiddle: http://jsfiddle.net/beroza/a1mbgyqx/

相关文章：