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);
});

这是我的小提琴：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
});

滑动右子菜单

1 个答案: