jQuery 手风琴不适合我

Question

我正在寻找使用 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“成分”上下滑动。

我希望有人能提供帮助:)

干杯，

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

Answer 2

手风琴需要以下结构：

<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 中工作的示例。

===更新===

虽然我忘了说这不一定是'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.