第一个手风琴项开始打开

Question

$(document).ready(function () {
        $('.accordian-content').hide();
        $('.accordian-title').click(function () {
            $('.accordian-content').not($(this).next('.accordian-content')).slideUp();
            $(this).next('.accordian-content').slideToggle();
        });
    });

 .accordian-title {
            width: 100%;
            cursor: pointer;
            padding: 20px;
            font-size: 20px;
        }

        .accordian-item {
            color: rgba(40, 150, 211, 1);
            margin: 0 auto 20px auto;
            width: 100%;
            max-width:444px;
            background: #fff;
            border: solid 1px #f0f0f0;
            border-radius: 5px;
            -webkit-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
            -moz-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
            box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
        }

        .accordian-content {
            color: #3a3a3a;
            padding: 0 20px;
            text-align: left;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="accordian">
                    <div class="accordian-item">
                        <div class="accordian-title">Enhance Your Customer Experience</div>
                        <div class="accordian-content" style="display: none;">
                            <p>Delight your customers with self-service analytics that let them access the data they need, when they need it, without waiting on your busy team.</p>
                        </div>
                    </div>

                    <div class="accordian-item">
                        <div class="accordian-title">Generate New Revenue Opportunities</div>
                        <div class="accordian-content" style="display: none;">
                            <p>Build and sell new data products and services that will clearly demonstrate the value of your overall offering so you can expand existing relationships and gain new customers</p>
                        </div>
                    </div>

                    <div class="accordian-item">
                        <div class="accordian-title">Less Expensive Than Building In-House</div>
                        <div class="accordian-content" style="display: none;">
                            <p>Save valuable development and maintenance time by embedding a flexible analytics platform that lets you meet your vision faster with best-of-breed functionality already baked in.</p>
                        </div>
                    </div>

                </div>

尝试使第一个手风琴项目开始打开以指示它们可以打开/关闭。尝试使用css并将其设置为“活动”，但似乎无法混入js并使其正常工作。任何帮助将不胜感激。

Answer 1

在页面加载时，将第一只手风琴向下滑动。

$(document).ready(function () {
        $('.accordian-content').hide();
        $(".accordian-content:first").slideDown();
        $('.accordian-title').click(function () {
            $('.accordian-content').not($(this).next('.accordian-content')).slideUp();
            $(this).next('.accordian-content').slideToggle();
        });
    });

.accordian-title {
            width: 100%;
            cursor: pointer;
            padding: 20px;
            font-size: 20px;
        }

        .accordian-item {
            color: rgba(40, 150, 211, 1);
            margin: 0 auto 20px auto;
            width: 100%;
            max-width:444px;
            background: #fff;
            border: solid 1px #f0f0f0;
            border-radius: 5px;
            -webkit-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
            -moz-box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
            box-shadow: -4px 4px 5px 0px rgba(0,0,0,0.29);
        }

        .accordian-content {
            color: #3a3a3a;
            padding: 0 20px;
            text-align: left;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="accordian">
                    <div class="accordian-item">
                        <div class="accordian-title">Enhance Your Customer Experience</div>
                        <div class="accordian-content">
                            <p>Delight your customers with self-service analytics that let them access the data they need, when they need it, without waiting on your busy team.</p>
                        </div>
                    </div>

                    <div class="accordian-item">
                        <div class="accordian-title">Generate New Revenue Opportunities</div>
                        <div class="accordian-content" style="display: none;">
                            <p>Build and sell new data products and services that will clearly demonstrate the value of your overall offering so you can expand existing relationships and gain new customers</p>
                        </div>
                    </div>

                    <div class="accordian-item">
                        <div class="accordian-title">Less Expensive Than Building In-House</div>
                        <div class="accordian-content" style="display: none;">
                            <p>Save valuable development and maintenance time by embedding a flexible analytics platform that lets you meet your vision faster with best-of-breed functionality already baked in.</p>
                        </div>
                    </div>

                </div>

Answer 2

更改此行$('.accordian-content').hide();

进入$('.accordian-content:not(:first)').hide();

它应该可以解决您的问题