jQuery手風琴不適用於我

我正在尋找一些使用jQuery手風琴的幫助。jQuery手風琴不適用於我

基本上，我的元素不是標準的h3和p標籤，它需要開箱即用。

jQuery的，我有如下

<script> 
jQuery(document).ready(function() { 
    jQuery("#contentHolder").accordion({ 
     header: '.clicker' 
    }); 
}); 
</script>

和即時通訊使用的是如下的HTML：

<div id="contentHolder"> 

<div id="recipe"> 
    <img src="style/img/rec-image.jpg"></img> 
    <p><span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br />stuff goes here</p> 
    <p><a class="clicker" href="#"><img src="style/img/details-btn.jpg"></img></a></p> 
    <div class="ingredients" style="margin-top: 136px;"> 
     <p style="width: 420px;"><span style="color: #5C971C; font-weight: bold;">Ingredients</span><br />2L white vinegar<br />2 cups water</p> 
    </div> 
</div> 

<div id="recipe"> 
    <img src="style/img/rec-image.jpg"></img> 
    <p><span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br />stuff goes here</p> 
    <p><a class="clicker" href="#"><img src="style/img/details-btn.jpg"></img></a></p> 
    <div class="ingredients" style="margin-top: 136px;"> 
     <p style="width: 420px;"><span style="color: #5C971C; font-weight: bold;">Ingredients</span><br />2L white vinegar<br />2 cups water</p> 
    </div> 
</div> 

</div>

如何我希望它的工作，是當有人點擊.clicker href我想div的「成分」上下滑動。

IM希望有人能幫助:)

乾杯，

來源

2011-10-20 BigJobbies

您的標記無效。可能不會有太大變化，但它總是有更好更清潔的有效標記。（例如'img'標籤：就像''不是''。您也有多個具有相同ID的元素。） –

根據jQuery UI Accordian文檔

The content element must be always next to its header.

你「點擊」是p元素

<p><a class="clicker" href="#"><img src="style/img/details-btn.jpg"></img></a></p>

內也許把「喀噠聲」放在p元素上？或者擺脫p元素。只要確保您嘗試顯示的div是DOM中的「下一個」元素。

來源

2011-10-20 05:42:30 vinhboy

它也似乎在尋找成對的元素。 –

嗯...有趣的是，我把它放在p標籤中..仍然沒有做任何事 – BigJobbies

在http://jsfiddle.net/ – vinhboy

以下結構的手風琴需求：

<div id="contentHolder"> 
    <div class="clicker"> 
     <a href="#">first clickable</a> 
    </div> 
    <div> 
     first content 
    </div> 

    <div class="clicker"> 
     <a href="#">next clickable</a> 
    </div> 
    <div> 
     next content 
    </div> 
</div>

也看到你的例子在這個jsfiddle工作。

=== UPDATE ===

雖然我忘了說，這不一定是'DIV的需要採取行動，但每個塊元素：

<div id="contentHolder"> 
    <p class="clicker"> 
     <a href="#"> 
      <img src="style/img/rec-image.jpg" /><br /> 
      <span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br /> 
      stuff goes here<br /> 
      <img src="style/img/details-btn.jpg" /> 
     </a> 
    </p> 
    <p class="ingredients"> 
     <span style="color: #5C971C; font-weight: bold;">Ingredients</span><br /> 
     2L white vinegar<br /> 
     2 cups water 
    </p> 

    <p class="clicker"> 
     <a href="#"> 
      <img src="style/img/rec-image.jpg" /><br /> 
      <span style="color: #5C971C; font-weight: bold;">Stuffs M</span><br /> 
      stuff goes here<br /> 
      <img src="style/img/details-btn.jpg" /> 
     </a> 
    </p> 
    <p class="ingredients"> 
     <span style="color: #5C971C; font-weight: bold;">Ingredients</span><br /> 
     2L white vinegar<br /> 
     2 cups water 
    </p> 
</div>

另見我更新jsfiddle。

來源

2011-10-20 06:21:01 scessor

中模擬它我忘了你不想'div's作爲元素包裝，我已經用'p'添加了一個例子。 – scessor

jQuery手風琴不適用於我

回答

相關問題