javascript - jquery show hide multiple div on click - 想在点击后隐藏触发器点击的链接

Question

我正在使用此代码显示/隐藏多个 div:FIDDLE

HTML

<ul class="fade_text">
    <li><a href="#" onClick="showdiv('astro-1'); return false;" class="toggle"><h4>Was ist ein Teleskop?</h4></a>

        <div id="astro-1" class="showHideDiv">
            Some Content
        </div>
    </li>
    <li><a href="#" onClick="showdiv('astro-2'); return false;" class="toggle"><h4>Lichtsammelvermögen</h4></a>

        <div id="astro-2" class="showHideDiv">
            Some Content
        </div>
    </li>
    <li><a href="#" onClick="showdiv('astro-3'); return false;" class="toggle"><h4>Grenzgröße (der schwächsten erkennbaren Sterne)</h4></a>

        <div id="astro-3" class="showHideDiv">
            Some Content
        </div>
    </li>
    <li><a href="#" onClick="showdiv('astro-4'); return false;" class="toggle"><h4>Auflösung(svermögen)</h4></a>

        <div id="astro-4" class="showHideDiv">
            Some Content
        </div>
    </li>
    <li><a href="#" onClick="showdiv('astro-5'); return false;" class="toggle"><h4>Vergrößerung</h4></a>

        <div id="astro-5" class="showHideDiv">
           Some Content
        </div>
    </li>
</ul>

JS

$(document).ready(function () {
    function showHideDivs() {
        $('.showHideDiv').each(function () {
            if ($(this).prevAll('a.toggle:first').hasClass('expanded')) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }

    $('a.toggle').click(function () {
        var addExpanded = !$(this).hasClass('expanded');
        $('a.toggle').removeClass('expanded');
        if (addExpanded) {
            $(this).addClass('expanded');
        }
        showHideDivs();
    });

    showHideDivs();
});

一切正常。
我的问题:我想隐藏链接 f.e.单击链接并显示文本容器后显示“Lichtsammelvermögen”。

我该怎么做？

Answer 1

你可以添加一个hide()调用

    $(this).hide();

如果你想在点击另一个标题时重新显示它，你也可以这样做:

    $('a').show();
    $(this).hide();

示例:http://jsfiddle.net/7pXpK/11/