如何找到一個類，並應用jQuery的風格？

我有一個手風琴的jsfiddle這個例子只用css3製作，沒有js。如何找到一個類，並應用jQuery的風格？

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');

我的問題是，這些源代碼不會應用到選擇，相信選擇$('.ac-container input:checked article.ac-small')是錯誤的或者其他的東西。

來源

2012-04-11 Patrioticcow

嘗試

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

來源

2012-04-11 20:29:07

你可以用一個選擇器寫它。 – gdoron 2012-04-11 20:30:22

這似乎工作 – Patrioticcow 2012-04-11 20:32:50

我看到由jeff b發表的帖子。我喜歡單選器的方法。我想我會給另一種方法。 – 2012-04-11 20:41:53

您的選擇是錯誤的。請允許我向你解釋，選擇取什麼：

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

會以選擇的ac-small類<article>元素檢查輸入的內部存在一個元素ac-container元素中存在。

那麼你不能有元素內輸入的 ...

在css你寫的選擇權：

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

來源

2012-04-11 20:21:50 gdoron

您要使用的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')

來源

2012-04-11 20:23:32

你這樣做

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

但是，您沒有任何元素的ID爲「ac-small」。

來源

2012-04-11 20:24:39 mamadrood

我不好，是'＃test_small' – Patrioticcow 2012-04-11 20:36:12

第一：
您必須將ID更改爲一類

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

二：
如果你希望得到您輸入的兄弟你必須這樣做：
獲取選中的輸入內容器，當發現得到它的文章兄弟，然後設置CSS。

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

來源

2012-04-11 20:41:19

如何找到一個類，並應用jQuery的風格？

回答

相關問題