jquery - 向右滑动子菜单

Question

我正在尝试开发“向右滑动”功能。

我有一组主菜单class="menu-heading"，当点击时，它们对应的子菜单的class="menu-body"应该滑出正确的。这些子菜单中的每一个都可以展开/折叠以显示信息。

我已经能够开发子菜单的展开和折叠，但是如果不使用 jQuery UI 向右滑动会很困难

HTML:

<ul>
    <li>
        <div class="menu-heading">
            <label>Top Ten Questions</label>
        </div>
        <div class="menu-body">
            <div>
                <label class="menu-body-heading bold">Question 1</label>
                <label class="visuallyhidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, nesciunt, adipisci consequuntur consectetur praesentium quaerat dolorem mollitia doloremque modi ullam!</label>
            </div>
            <div>
                <label class="bold">Question 2</label>
                <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit</label>
            </div>
            <div>
                <label class="bold">Question 3</label>
                <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</label>
            </div>
        </div>
    </li>
    <li>
        <div class="menu-heading">
            <label>Contact Us</label>
        </div>
        <div class="menu-body">
            <div>
                <label class="bold">Whats your email?</label>
                <label>test@test.com</label>
            </div>
            <div>
                <label class="bold">Whats your telephone?</label>
                <label>0000000001</label>
            </div>
        </div>
    </li>
    <li>
        <div class="menu-heading">
            <label>Products</label>
        </div>
        <div class="menu-body">
            <div>
                <label class="bold">Tables</label>
                <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</label>
            </div>
            <div>
                <label class="bold">Chairs</label>
                <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</label>
            </div>
        </div>
    </li>
</ul>

jQuery:

$(".menu-body").hide();

$(".menu-heading").click(function () {
    var $this = $(this);
    $this.next(".menu-body").slideToggle(400);
});

这是我的 fiddle :http://jsfiddle.net/oampz/8stR4/1/

我试图没有 jQuery UI 来实现这个

类似于我想要实现的目标:http://jsfiddle.net/hcmLw/2/light/ (当从下拉列表中选择右)

感谢任何帮助

Answer 1

A great tutorial for sliding elements

$('#yourDiv').animate({
  marginLeft: parseInt($('#yourDiv').css('marginLeft'),10) == 0 ?
    $('#yourDiv').outerWidth() : 0
});