切換第一項打開

Question

我正在使用jQuery切換功能進行導航。我的問題是，默認情況下，所有的切換都是可見的，但我只想讓第一個打開，其他人關閉。

http://jsfiddle.net/TeDFs/1/

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-visible逆箭頭更改類widget-title;加入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/