1

我在手风琴的jsfiddle中有这个例子，它只用 css3 制作，没有 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 更改为 class

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

第二：
如果你想获得输入的兄弟，你必须这样做：
获取容器内的检查输入，当找到它时获取它的文章兄弟，然后设置 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

你来做这件事

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

但是您没有任何 id 为“ac-small”的元素。

于 2012-04-11T20:24:39.957 回答