切换第一个项目打开答案

【问题标题】：Toggle with first item open切换第一个项目打开
【发布时间】：2012-11-03 17:54:23
【问题描述】：

我正在使用 jQuery 切换功能进行导航。我的问题是默认情况下所有切换都是可见的，但我只想打开第一个而其他关闭。

HTML

<div id="authors" class="widget">
<h2 class="widget-title">Authors</h2>
<div class="toggle">
    <div class="submenu">
        <ul>
            <li>Name 1</li>
            <li>Name 2</li>
            <li>Name 3</li>
            <li>Name 3</li>
        </ul>
    </div>
</div>

<div id="archives" class="widget">
<h2 class="widget-title">Archiv</h2>
<div class="toggle">
    <div class="submenu">       
        <ul>
                <li>November 2012</li>
            <li>Oktober 2012</li>
        </ul>
    </div>
</div>
</div>

jQuery

function toggleWidgets() {
    jQuery('.widget-title').addClass('plus'); 

    jQuery('.widget-title').click(function() {
        $(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
    });
} 

jQuery(document).ready(function() {
    toggleWidgets();
} )

CSS

body {
    font-size: 0.875em; 
    line-height: 1.5em; 
}

h2 {
    font-size: 1.25em;
}

.plus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 -10px no-repeat;
    padding: 0 0 0 12px;
}
.minus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 5px no-repeat;
    padding: 0 0 0 12px;
}

这是更新后的代码：第一个开关打开，第二个关闭。

http://jsfiddle.net/TeDFs/4/

HTML（将第一项的widget-title 类更改为widget-title-visible 以反转箭头；将hidden 类添加到第二项以关闭它）

<div id="authors" class="widget">
<h2 class="widget-title">Authors</h2>
<div class="toggle">
    <div class="submenu">
        <ul>
            <li>Name 1</li>
            <li>Name 2</li>
            <li>Name 3</li>
            <li>Name 3</li>
        </ul>
    </div>
</div>

<div id="archives" class="widget">
<h2 class="widget-title">Archiv</h2>
<div class="toggle hidden">
    <div class="submenu">       
        <ul>
            <li>November 2012</li>
            <li>Oktober 2012</li>
        </ul>
    </div>
</div>
</div>

jQuery（为 widget-title-visible 类添加了逆事件）

function toggleWidgets() {
    jQuery('.widget-title').addClass('plus'); 

    jQuery('.widget-title-visible').addClass('minus'); 

    jQuery('.widget-title-visible').click(function() {
        $(this).toggleClass('minus').toggleClass('plus').next().toggle(180);
    });

    jQuery('.widget-title').click(function() {
        $(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
    });
} 

jQuery(document).ready(function() {
    toggleWidgets();
} )

CSS（添加类hidden，类plus 和minus 中的反向背景）

.hidden{
    display: none;
}

.plus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 5px no-repeat;
    padding: 0 0 0 12px;
}
.minus {
    background: url(http://moargh.de/daten/sidebar_arrows.png) 0 -10px no-repeat;
    padding: 0 0 0 12px;
}

【问题讨论】：

标签： jquery toggle

【解决方案1】：

像这样创建一个样式名称.hidden：

.hidden{
    display:none;
}

并像这样应用于您的切换 div：<div class="toggle hidden"> 最后，反转你的箭头行为（正负）

更新小提琴：http://jsfiddle.net/TeDFs/3/

【讨论】：