Question

i have this example in jsfiddle of a accordion only made with css3, no js.

<>光>:

<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>

http://www.ohchr.org。

.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;*/
}

问题一是,高点已经确定,一是增加原样,一是不能确定有多少内容需要具有动态的高度。

the php will be loading the p tag so i can find the height like this:

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

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

问题一是,胜数适用于选任人,即认为选任人<代码>(......ac-container content:checked article.ac-small >是错的。

Answer 1

审判

$( .ac-container input:checked ).parent( div ).children( article.ac-small ).css("height", v+ px );

Answer 2

你的选择是错误的。请允许我向您解释一下这些选择者 f:

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

它将选择<代码><article>s和-small,这些元素存在于一个要素<代码>ac-container内。

Well you can t have element inside of an input...

在<代码>cs 您写道:

.ac-container input:checked ~ article.ac-small{
    height: 140px;
}

Answer 3

First:
You have to change the id to a class

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

Second:
If you want to get the sibling of your input you have to do it:
Get the checked input inside the container, when found get it article sibling and then set the css.

$( .ac-container ).find( input:checked ).siblings( article ).css("height", v+ px );

Answer 4

http://api.jquery.com/next-siblings-selector/“rel=“nofollow”>next sibling selectedor。 <代码>~选择了与选择人相匹配的下一个兄弟姐妹,而不是与该选择人的儿童:

$( .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 )

Answer 5

您

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

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

友情链接