Question

我遇到了一些只能解决一个div的问题。

当我点击＆＃34; impressum＆＃34;只有impressum显示在<div class="ContentBox">内。但是当我点击＆＃34; AboutMe＆＃34;它显示了div（aboutMe和impressum）

我是瞎了吗？

这就是我得到的：

        <div id="menu">
        <div class="inhalt">
            <ul>
                <li><a href="#"><img src="img/menu/home.png">Home</a></li>
                <li><a href="#" class="ContentBox_open" id="AboutMe"><img src="img/menu/ich.png">Über mich</a></li>
                <li><a href="#" class="ContentBox_open" id="impressum"><img src="img/menu/impressum.png">Impressum</a></li>
            </ul>
        </div>
    </div>

    <div class="ContentBox">
        <div class="close"><img id="ContentBox_close" src="img/menu/kategorien.png" alt="close"></div>
        <div id="impressumTxt" style="display:none;">
            <h1>Impressum</h1>
            <p>bla blub bla bla </p>
        </div>
        <div id="AboutMeTxt" style="display:none;">
            <h1>Über mich</h1>
            <p>bla blub bla bla </p>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
        $(function(){
            // impressum anzeigen
            $('.ContentBox_open').click(
                function(event) {
                    var ContentId = event.target.id;
                    $('#'+ContentId+'Txt').fadeTo( 10, 0.90 );
                    $('.ContentBox').fadeTo( "slow", 0.90 );
                }
            );

            // impressum ausblenden
            $('#ContentBox_close').click(
                function() {
                    $('.ContentBox').fadeTo( 1000, 0 );
                }
            );
        });
    </script>

感谢您的帮助！

Answer 1

关闭容器时，需要隐藏所有子内容div。否则，当您再次淡化父容器时，它们仍然可见。始终确保具有共同行为的项目具有您可以访问的公共类（我在此示例中添加了class="content"）：

e.g。

$('.ContentBox').fadeTo(1000, 0, function(){
    $(this).find('.content').hide()
});

JSFiddle： http://jsfiddle.net/zo83qpdq/

    $(function () {
        // impressum anzeigen
        $('.ContentBox_open').click(function (event) {
            var ContentId = event.target.id;
            $('#' + ContentId + 'Txt').fadeTo(10, 0.90);
            $('.ContentBox').fadeTo("slow", 0.90);
        });

        // impressum ausblenden
        $('#ContentBox_close').click(function () {
            $('.ContentBox').fadeTo(1000, 0, function(){
                $(this).find('.content').hide()
            });
        });
    });

如果您只想一次显示一个div，则需要更改show logic以隐藏所有其他内容div。

e.g。 JSFiddle：http://jsfiddle.net/zo83qpdq/1/

Answer 2

您可以在关于我和Impressum的文本部分添加一个类，以便在显示其他部分之前隐藏它们。

在您的情况下，打开的部分在另一个打开之前不会关闭。

只需在打开新版

之前添加$('.class').hide()

Fiddel as an example

显示div只有另一个id触发

2 个答案: