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/

了解jQuery父母和孩子

1 个答案: