javascript - 了解 jQuery 父子关系

Question

我正在尝试理解 jquery 并碰上了砖墙。我创建了一个下拉显示和隐藏菜单功能 [单击此处][1] 但是我无法让它正常工作。在您看到的页面右侧，交付等。我正在尝试创建一个功能，当用户单击其中一个选项卡时，它会隐藏具有类的选项卡.active并在下一个添加类li。出于某种原因，我的脚本无法正常工作。有谁知道为什么？

$('.hidden-bits').removeClass('active');
    $('.hidden-bits').eq(0).addClass('active');

    $('.accordin-link').click(function(){
        var $this = $(this);
        $('.hidden-bits').slideUp().removeClass('active');
        $this.parent()('.hidden-bits').slideDown().addClass('active');
    });

HTML

<ul id="product-info">
    <li>
        <span>
            <a class="accordin-link" href="#">about</a>
        </span>
          <ul class="hidden-bits">
            <li>
                <div class="tab">
                    <div class="productDesc">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, labore et dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipisicing elit, labore et dolore magna aliqua Lorem ipsum dolor sit amet, consectetur adipisicing elit, labore et dolore magna aliqua.
                    </div>
                </div>
            </li>
        </ul>
    </li>

.hidden-bits{
    display: none;
}

.active{
    display: block;
}

Answer 1

你需要这样做——

$('.accordin-link').click(function(){
    var $this = $(this);
    $('.hidden-bits').slideUp().removeClass('active');
    $this.parent().next('.hidden-bits').slideDown().addClass('active');
});

演示---> http://jsfiddle.net/HhMjn/