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.

你的＆＃34;点击器＆＃34;在p元素内部

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

也许把＃34; clicker＆＃34;在p元素？或者摆脱p元素。只需确保您要显示的div是＆＃34; next＆＃34; 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。

=== 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。

jQuery手风琴不适合我

2 个答案: