0

ナビゲーションに 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;
}

</p>

更新されたコードは次のとおりです。最初のトグルが開かれ、2 番目のトグルが閉じられます。

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

HTML (widget-title最初のアイテムのクラスを変更widget-title-visibleして矢印を反転させ、hidden2 番目のアイテムにクラスを追加して閉じます)

<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 (追加された class 、クラスhidden化された反転背景)plusminus

.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;
}

</p>

4

1 に答える 1

0

そのようなスタイル名を作成します.hidden:

.hidden{
    display:none;
}

そして、次のようにトグル div に適用します:<div class="toggle hidden"> 最後に、矢印の動作を逆にします (プラスとマイナス)

更新されたフィドル: http://jsfiddle.net/TeDFs/3/

于 2012-11-03T19:42:54.057 に答える