Question

我有page，当我点击“计算机”或任何其他标题时，下面的项目需要上下滑动

我有这个结构

    <div class="title-box box-active">
    <div class="line">
        <div class="text left">
            <p>(1) Software</p>
        </div>
        <div class="price right">
            <p>500.00</p>
        </div>
        <div class="cl">&nbsp;</div>
    </div>
</div>
<div class="item">
    <div class="item-t"></div>
    <div class="item-c">
        <div class="line last">
            <input type="text" class="field left" value="1" />
            <div class="text left">
                <p>Aldelo</p>
            </div>
            <div class="price left">
                <p>450.00</p>
            </div>
            <a href="#" class="close right"></a>
            <div class="cl">&nbsp;</div>
        </div>
    </div>
    <div class="item-b"></div>
</div>

但这不起作用，我无法弄清楚原因

$('.title-box').click(function() {
 $(this).parent().next('.line').slideToggle();
return false;
});

Answer 1

如果您尝试让.line元素滑动，则child为.title-box，请尝试以下操作：

$('.title-box').click(function() {
    $(this).children('.line').slideToggle();
    return false;
});

在回调中，this指的是.title-box。因为.line是.title-box的直接孩子，所以您需要使用.children('.line')来获取它。

Answer 2

鉴于页面的结构，我相信这是您需要的代码

$('.title-box').click(function() {
    $(this).next('.item').slideToggle();
    return false;
});

Slidetoggle我错过了什么

2 个答案: