Question

我在手风琴的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')是错误的。

Answer 1

试

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

Answer 2

你的选择器错了。请允许我向您解释选择器取出的内容：

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

它将选择存在于元素<article>元素内的已检查输入内的类ac-small的{{1}}元素。

嗯，你输入的内容

在您正确编写选择器的ac-container中：

css

Answer 3

<强>首先
您必须将id更改为类

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

<强>第二
如果你想得到你输入的兄弟，你必须这样做：
获取容器内的已检查输入，当找到它的文章兄弟，然后设置CSS。

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

Answer 4

您想使用next sibling selector。 ~选择与该选择器匹配的下一个兄弟，而不是具有该选择器的子节点：

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

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

如何找到一个类并使用jquery应用样式？

5 个答案: