1

それで、私は自分のウェブサイトのプロジェクト セクション用にアコーディオンのようなものを作ろうとしていますが、非常に奇妙な問題に遭遇しました (または、本当に疲れているだけかもしれません)。選択範囲を展開するための最初のクリックは正常に機能しますが、ヘッダーを再度クリックして元の状態に戻すと、以前に展開されたヘッダーの内容が非表示になります。さらに、同じヘッダーをもう一度クリックすると、最初の境界線が消えた後はいつでも展開できます。

私の問題を実際に見るには、私のウェブサイトにアクセスしてください：

http://cole.quinnchrzan.com/cc2

プロジェクトセクションをクリックして、自分の目で確かめてください。

ここでコードを見たいだけなら、それは次のとおりです：

$(document).ready(function() {
var sign = 1;
    $('#projects > div:not(.header)').on('click', function() {
        if (sign == 1) {
            $(this).css('border-bottom', 'none');
            $(this).children().slideDown(400);
            $(this).siblings().slideUp(400);
        }
        else {
            $(this).css('border-bottom', '1px solid black');
            $(this).children().slideUp(400);
            $(this).siblings().slideDown(400);
            $(this).css({
                'height': '29px',
                'z-index': '2'
            });
        }
        sign = sign*-1;
    });
});

そしてHTML：

<section id="projects">
    <div class="header">Websites</div>
    <div><a href="#">Saia LTL, Inc.</a>
        <div></div>
    </div>
    <div><a href="#">Insurance House</a></div>
    <div><a href="#">Scandinavian Collectors Club</a></div>
    <div><a href="#">Casey Sills Photography</a></div>
    <div class="header">Personal Projects</div>
    <div><a href="#">cTV</a></div>
    <div><a href="#">PoE DPS calculator</a></div>
    <div><a href="#">tSlide</a></div>
</section>

'height': '29px' 'z-index': '2'影響を受ける見出しを再度表示するために追加の cssを追加しましたが、空の div が作成されるだけです。この css がなければ、div には高さがありません。

4

4 に答える 4

0

ばかげた間違いでした。非表示/表示するときに子供だけを選択するのを忘れただけだっdivたので、a子供たちは非表示のままか何かでした。言い換えれば、私はこれを変更しました：

$(this).children()

これに：

$(this).children('div')

指摘してくれたpfriedに感謝します！

于 2013-04-01T09:46:49.920 に答える
-1 
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>$(document).ready(function() {
    var sign = 1;
        $('#projects > div.header').on('click', function() {
            if (sign == 1) {
                $(this).css('border-bottom', 'none');
                $(this).children().slideDown(400);
                $(this).siblings().slideUp(400);
            }
            else {
                $(this).children().slideUp(400);
                $(this).siblings().slideDown(400);
                $(this).css({
                    'height': '29px',
                    'z-index': '2'
                });
            }
            sign = sign*-1;
        });
        $('div.slide').click(function(){
            $('div.cont').slideToggle('slow');
        });
    });
    </script>
    <style>
        div.cont{ display: none;}
    </style>
</head>
<body>
   <div id="projects">
        <div class="header">Websites</div>
            <div class='slide'><a href="#">Saia LTL, Inc.</a>
              <div class='cont'></div>
            </div>
            <div class='slide'><a href="#">Insurance House</a><div class='cont'></div></div>
            <div class='slide'><a href="#">Scandinavian Collectors Club</a><div class='cont'></div></div>
            <div class='slide'><a href="#">Casey Sills Photography</a><div class='cont'></div></div>
        <div class="header">Personal Projects</div>
            <div class='slide'><a href="#">cTV</a><div class='cont'></div></div>
            <div class='slide'><a href="#">PoE DPS calculator</a><div class='cont'></div></div>
            <div class='slide'><a href="#">tSlide</a><div class='cont'></div></div>
    </div>
</body>

兄弟を具体的に示すクラスを兄弟に追加しようとしました----あなたは見ていますか私は幸せですか、それとも何か特にコメントしてください-----ありがとう

于 2013-04-01T08:44:10.567 に答える