Javascript 做一些'；李'；以可见和隐藏他人的方式

检查我的，正如您在plunker中看到的：

菜单满满的

“moveLeft”和“moveRight”按钮将菜单移动-/+1

如果到达第一个和最后一个菜单，相应的“moveLeft”和“moveRight”将被禁用

早期的

menucontainer

class I使用的是

overflow:hidden

，因此菜单不是流动的，但是

overflow:hidden

也被应用于子级菜单，它们被剪切。 所以最后我决定从

menucontainer

类中删除

overflow:hidden

所以我想数一数菜单，只需要3个菜单就可以看到，然后隐藏所有其他菜单。我正在努力实现的目标：

让我们假设当前位于中间的3个菜单是

444

555

666

一次3个菜单将可见，所有其他菜单将隐藏

单击“向右移动”将菜单移动+1，即

555

666

777

将可见，其余所有菜单将隐藏

单击“moveLeft”将菜单移动-1，即

333

444

555

将可见，其余所有菜单将隐藏

这可以通过javascript实现吗？我是js的新手，任何助手都会非常感激

注意：我的网页非常复杂，plunker只是用最简单的方式显示问题。 请不要建议给溢出：隐藏

HTML代码

<div>
  <input ng-click="myStyle={'margin-left': moveLeft()}" ng-show="menuItems > 3" ng-disabled="leftdisabled" class="left leftbtnposition" type="button" value="Move Left" />
  <div class="menucontainer left">
    <ul ng-style="myStyle">
      <li ng-repeat="item in items"> <a href="#">{{item.name}}</a>

      </li>

    </ul>
  </div>
  <input ng-click="myStyle={'margin-left': moveRight()}" ng-show="menuItems > 3" ng-disabled="rightdisabled" class="left rightbtnposition" type="button" value="Move Right" />
</div>

---

我认为对当前设置执行此操作的最佳方法是，根据当前选定的3个项目中的内容，对要隐藏的项目应用一个类

我添加了一个

$scope.leftMost

变量来监视

$scope中的索引。items

位于可见区域的左侧

然后向每个

$scope.items

元素添加一个布尔值，称为

isVisible

在html文件中，我们添加了一个

ng类

，该类基于此布尔值切换类

ng类=“{hidden:！item.isVisible}”

然后根据您已经定义的

moveLeft

和

moveRight

方法，我们使用

$scope.leftMost

变量根据需要切换

isVisible

布尔值

对于抛出的

.hidden

类，也有一些CSS魔法

.menucontainer .hidden{
   opacity:0;
   visibility:hidden;
 }

---

附加的

除了OP的评论之外，您还可以在返回数据返回到服务中时对其进行解析。例如：

.factory('MenuItems', ['$http', function ($http) {
    var factory = {};

    var addVisible = function(menuItems){
        for(var x = 0; x < menuItems.videos.length; x++){
            var menuItem = menuItems[x];
            if(x < 3){
                menuItem.isVisible = true;
            }else{
                menuItem.isVisible = false;
            }
        }
        return menuItems;
    }

    factory.get = function () {
        var path = '/menuItemUrl/';
        return $http.get(path).then(function (resp) {
            if(resp.data.length){
                return addVisible(resp.data[0]);
            }
        });
    };
    return factory;
}])

.factory（'MenuItems'，['$http'，函数（$http）{
变量工厂={}；
var addVisible=函数（menuItems）{
对于（var x=0；x

你喜欢什么

我修改了你在评论（）中发布的小提琴

可以将动画更改为所需的任何延迟，它当前设置为0

JS

.menucontainer
 {
   width:300px;
   margin-left:200px;
/*   overflow:hidden;*/ not using this property now
 }
 .menucontainerhidden
 {
   width:300px;
   margin-left:200px;

 }
 .leftbtnposition
  {
   position:absolute;
   left:138px;
 }
 .rightbtnposition
  {
   position:absolute;
   left:510px;
 }

var myMargin = 112;
var numberOfVisibleItems = 3;
var numberOfItems = $('#menulist').children('li').length;

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

hideItems();

function hideItems() {
    var currentMarginLeft = parseInt($('#menulist').css("margin-left"), 10);
    var index = Math.abs(currentMarginLeft / myMargin);
    $('#menulist').children('li').css("visibility", "hidden");
    for (var i = 0; i < numberOfVisibleItems; i++) {
        $('#menulist').children('li').eq(index + i).css("visibility", "visible");
    }
}

$('.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
        });
    }
});

---

如果您在第一个列表项中，是否仍希望至少有3项可见？或者它更像当前所选项目左侧和右侧的项目（如果可用）？是的，至少3个菜单将随时可见。当前，如果我是第一个，则第3项菜单将可见，并且“moveleft”被禁用。关键问题是仅使3个菜单可见并隐藏其他菜单，当用户单击“moveleft”时，“moveleft”菜单将随着-/+1移动。让我们假设可见菜单是

444555666

，因此如果我单击

moveRight

，可见菜单将是

55566777

。单击

moveLeft

它将是

333444555

。像这样吗？我刚才做这个小提琴是为了回答别人的问题question@ctwheels如前所述，无法使用溢出：隐藏。。在这把小提琴中，您显示了4个菜单，其他菜单是隐藏的，因为您在

#outer

中有

溢出：隐藏。我评论了这个属性。现在您可以看到所有菜单都是可见的。我希望通过相同的行为只显示4个菜单。需要帮助吗，在plnkr中，我刚刚显示了json数据，但在我的应用程序中，它来自服务，所以如何添加isVisible属性？@ankit请参阅答案的其他部分