javascript - 负载第一师应该是开放的

Question

我希望当页面加载时，默认情况下应该打开第一个分区。如果用户想要打开第一个 Accordion 分区，那么将采用用户偏好，然后在页面加载时打开第一个 div，如果用户想要将首选项更改为第二分区，然后第二分区将打开

<div class="wrap">
    <ul class="accordion1">
        <li>
             <h2 id="first">CMT</h2>

            <div class="content">
                <ul class="accord">
                    <li> <a href="#">main link1</a>

                        <ul>
                            <li><a href="#">Link One</a>
                            </li>
                            <li><a href="#">Link Two</a>
                            </li>
                            <li><a href="#">Link Three</a>
                            </li>
                            <li><a href="#">Link Four</a>
                            </li>
                            <li><a href="#">Link Five</a>
                            </li>
                        </ul>
                    </li>
                    <li> <a href="#">main link2</a>

                        <ul>
                            <li><a href="#">Link One</a>
                            </li>
                            <li><a href="#">Link Two</a>
                            </li>
                            <li><a href="#">Link Three</a>
                            </li>
                            <li><a href="#">Link Four</a>
                            </li>
                            <li><a href="#">Link Five</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </li>
        <li>
             <h2>FOIS</h2>

            <div class="content">content fois</div>
        </li>
        <li>
             <h2>ASP</h2>

            <div class="content">content ASP</div>
        </li>
        <li>
             <h2>PTT</h2>

            <div class="content">content PTT</div>
        </li>
    </ul>
</div>

CSS

.wrap {
    margin-left: 0px;
    margin-top: 0px;
    width: 100px;
}
.accordion1 {
    width: 178px;
    margin: 0px;
    padding: 0px;
    list-style: none;
    border: 1px solid #ddd;
}
.accordion1 h2 {
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    text-decoration: none;
    padding: .25em .25em .25em 2em;
    color: #333;
    background: url('compo_images/gradient_v_gray.gif') repeat-x;
    background: url("./compo_images/arrow_exp_s.gif") 1em .75em no-repeat;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}
.accordion1 h2:hover {
    background: url('compo_images/gradient_v_orange.gif') repeat-x;
    color: white;
}
.accordion1 li div.content {
    padding: 3px;
    background: #fcfbfb;
    border-bottom: 1px solid #ddd;
    /*border: 1px solid #ddd;*/
}
.accordion1 li:hover h2 {
    color: white;
    background-image: url("./compo_images/arrow_exp_n.gif");
    background: url('compo_images/gradient_v_orange.gif') repeat-x;
}
.accord > li {
    padding: 0;
    list-style-type: none;
}
.accord > li > a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-left: 12px;
    color: #5f5c5c;
    background: url("./compo_images/arrow_pointer_se.gif") 0.002em no-repeat;
}
.accord > li > ul > li > a {
    text-decoration: none;
    color: #5f5c5c;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background: url("./compo_images/arrow_dirmini_orange_e.gif") 0.35em no-repeat;
    padding-left: 17px;
}
.accord > li > ul {
    list-style-type: none;
    text-align: left;
    margin: 0;
    padding: 1px;
}
.accord {
    text-decoration: none;
    padding-left: 5px;
}
.accord > li > a:hover {
    color: #f8b106;
}
.accord > li > ul > li > a:hover {
    color: #f8b106;
}

.accordion1 > li > h2.active{
    background-color: red;
}

j查询

jQuery(function ($) {


    var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
    var $h2s = $lis.children('h2').click(function(){
        var $this = $(this), $t = $this.next();
        $contents.not($t).stop(true, true).slideUp();
        $this.toggleClass('active', !$t.is(':visible'));
        $t.slideToggle();
        $h2s.not(this).removeClass('active');
    })
})

js fiddle http://jsfiddle.net/dh7Cc/2/

Answer 1

尝试在第一个h2元素上触发点击事件

jQuery(function ($) {

    var $lis = $('.accordion1 > li'), $contents = $lis.children('.content').hide();
    var $h2s = $lis.children('h2').click(function(){
        var $this = $(this), $t = $this.next();
        $contents.not($t).stop(true, true).slideUp();
        $this.toggleClass('active', !$t.is(':visible'));
        $t.slideToggle();
        $h2s.not(this).removeClass('active');
    });
    $h2s.first().click()
})