Question

我正在使用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;
}

Answer 1

创建样式名称.hidden，如下所示：

.hidden{
    display:none;
}

并适用于您的切换div：<div class="toggle hidden"> 最后，反转你的箭头行为（加号和减号）

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

切换第一个项目打开

1 个答案: