Javascript 单击时菜单的水平移动

检查这个链接，你可以看到我有12个菜单项，但由于空间限制，不能显示超过4个菜单。如您所见，当前只有Menu1到Menu4可见，其他MEU隐藏

更新：由于JSFIDLE做了一些清理，他们删除了我的FIDLE，我在上面发布了回答FIDLE。在我的问题中，一个jquery部分不在那里

我有两个按钮：

向左移动-1（稍后称为“ML”）

向右移动+1（稍后称为“MR”）

我正努力做到这一点：

单击

MR

将使菜单沿

+1

单击

ML

将使菜单沿

-1

HTML

<div id="outer">
<input type="button" value="move left by -1" class="left" />
<input type="button" value="Move Right by +1" class="left" />
<ul id="menulist">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li>Menu 6</li>
    <li>Menu 7</li>
    <li>Menu 8</li>
    <li>Menu 9</li>
    <li>Menu 10</li>
    <li>Menu 11</li>
    <li>Menu 12</li>
</ul>

任何有关这方面的帮助都将不胜感激

double

li {
        border:darkgrey;
        border:1px solid black;
    }

html

如上面的评论所述，如果这在IE中不起作用，请查看是否会对您有所帮助

HTML

JS

---

查看jquery的

.animate（）

：此网页可能也会帮助您：无法：（，你能检查一下我缺少的是什么吗左边距而不是左边距：这里我在小提琴上添加了一些东西，玩到你想要的为止。我添加了一些if语句来检查边距，然后再移动菜单。@ctwheels只是问一下，所有小提琴都被删除了？如何检索？甚至我给出的小提琴链接也被删除了？你知道吗他们清理了网站？感谢回应，当我们点击菜单12时，检查小提琴，最终按钮将消失。这可能看起来像是我在要求更多。我们可以有一个菜单链，它将继续移动。直到某种程度上我能做的角度，这在IE 10中也起作用，

double

li {
        border:darkgrey;
        border:1px solid black;
    }

<input type="button" value="move left by -1" class="left" />
<input type="button" value="Move Right by +1" class="right" />

$('.left').click(function() {
    if($('#menulist').css('margin-left')=='-896px'){
         $('#menulist').css('margin-left','-896px!important');
    }
    else{
        $('#menulist').animate({
        'marginLeft' : "-=112px" //moves left
        });
    }
});
$('.right').click(function() {
    if($('#menulist').css('margin-left')=='0px'){
         $('#menulist').css('margin-left','0px!important');
    }
    else{
        $('#menulist').animate({
        'marginLeft' : "+=112px" //moves right
        });
    }
});

<div id="outer">
    <input type="button" value="move left by -1" class="left" />
    <input type="button" value="Move Right by +1" class="right" />
    <ul id="menulist">
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
        <li>Menu 5</li>
        <li>Menu 6</li>
        <li>Menu 7</li>
        <li>Menu 8</li>
        <li>Menu 9</li>
        <li>Menu 10</li>
        <li>Menu 11</li>
        <li>Menu 12</li>
    </ul>

#outer {
    width:448px;
    overflow:hidden;
}
.left {
    float:left;
}
ul, li {
    list-style:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
ul {
    font-size:0;
    float:left;
    width:1400px;
}
li {
    display:inline-block;
    padding:5px;
    background:lightgrey;
    border:darkgrey;
    width:100px;
    overflow:hidden;
    text-align:center;
    font-size:14px;
    border:1px solid black;
}

$('.left').click(function () {
    if (parseInt($('#menulist').css('margin-left'), 10) >= -784) {
        $('#menulist').animate({
            'marginLeft': "-=112px" //moves left
        });
    }
});
$('.right').click(function () {
    if (parseInt($('#menulist').css('margin-left'), 10) >= 0) {
        $('#menulist').css('margin-left', '0px!important');
    } else {
        $('#menulist').animate({
            'marginLeft': "+=112px" //moves right
        });
    }
});