1

この例は、css3のみで作成されたアコーディオンの jsfiddle にあり、js はありません。

HTML:

<div class="ac-container">
    <div>
        <input id="ac-1" name="accordion-1" type="radio" checked />
        <label for="ac-1">About us</label>
        <article class="ac-small">
            <p id="test_small">test</p> <-- this tag will come from php
        </article>
    </div>
    <div>
        <input id="ac-2" name="accordion-1" type="radio" />
        <label for="ac-2">How we work</label>
        <article class="ac-medium">
            <p id="test_medium">test</p>
        </article>
    </div>
</div>​

CSS:

.ac-container input:checked ~ article.ac-small{
    height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
    height: 180px;
}
.ac-container input:checked ~ article.ac-large{
   /* height: 240px;*/
}

私が抱えている問題は、高さが既に設定されていることです.phpでコンテンツを追加しましたが、コンテンツの量がわからないので、動的な高さが必要です。

PHPはpタグをロードするので、次のように高さを見つけることができます:

var v = $("#test_small").height();

// add the height to the .ac-small
$('.ac-container input:checked article.ac-small').css("height", v+'px');

私が抱えている問題は、cssがセレクターに適用されないことです。セレクター$('.ac-container input:checked article.ac-small')が間違っているか何かだと思います。

4

5 に答える 5

3

試す

$('.ac-container input:checked').parent('div').children('article.ac-small').css("height", v+'px');
于 2012-04-11T20:29:07.837 に答える
1

セレクターが間違っています。そのセレクターがフェッチするものを説明させてください。

$('.ac-container input:checked article.ac-small')

要素要素内に存在する、チェックされた入力内に存在する<article>クラスを持つ要素を選択します。ac-smallac-container

入力内に要素を含めることはできません...

cssあなたはセレクターを正しく書きました：

.ac-container input:checked ~ article.ac-small{
    height: 140px;
}
于 2012-04-11T20:21:50.927 に答える
1

最初：
IDをクラスに変更する必要があります

var v = $(".ac-small").height();

2番目:
入力の兄弟を取得したい場合は、それを行う必要があります:
コンテナー内でチェックされた入力を取得し、見つかったら記事の兄弟を取得してから、css を設定します。

$('.ac-container').find('input:checked').siblings('article').css("height", v+'px');
于 2012-04-11T20:41:19.590 に答える
0

次の兄弟セレクターを使用したい。 ~そのセレクターを持つ子ではなく、そのセレクターに一致する次の兄弟を選択します。

$('.ac-container input:checked ~ article.ac-small')

これを次のように書くこともできます。

$('.ac-container').find('input:checked').siblings('article.ac-small')

またはより正確に（次の兄弟の場合）：

$('.ac-container').find('input:checked').nextAll('article.ac-small')
于 2012-04-11T20:23:32.720 に答える
0

You do this

var v = $("#ac-small").height();

But you don't have any element with an id of "ac-small".

于 2012-04-11T20:24:39.957 に答える