jQuery Accordion 不适合我

Question

我正在寻找使用 jQuery Accordion 的一些帮助。

基本上，我的元素不是开箱即用的标准 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“成分”上下滑动。

我希望有人能帮忙:)

干杯，

Answer 1

根据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 中的“下一个”元素即可。