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

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

$(this).hide()为假时写addExpanded。

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

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

Answer 2

您可以添加hide()来电

    $(this).hide();

如果您想在点击其他标题时重新显示它，您也可以这样做：

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

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

jquery show在点击时隐藏多个div - 想要在点击后隐藏触发点击链接

2 个答案: