jquery显示隐藏多个div在单击后要隐藏触发器单击链接。

Question

我使用这段代码显示/隐藏多个div：小提琴

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/

Answer 2

http://jsfiddle.net/7pXpK/10/

当$(this).hide()为false时编写addExpanded。

    $('a.toggle').click(function () {
        var addExpanded = !$(this).hasClass('expanded');

        if (addExpanded) {
            $(this).addClass('expanded');
        } else {
            $('a.toggle').removeClass('expanded');
            $(this).hide();
        }
        showHideDivs();
    });