Question

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

菜单溢出。
'moveLeft'和'moveRight'按钮将菜单移至 - / + 1。
如果您到达第一个和最后一个菜单，相应的'moveLeft'和'moveRight'将被禁用。

早些时候menucontainer上课时我使用的是overflow:hidden，因此菜单并没有过多，但overflow:hidden也适用于子级菜单，它们正在切割。最后我决定从overflow:hidden类中删除menucontainer。

所以我想到了计算菜单并使仅显示所需的3个菜单并隐藏所有其他菜单。我想要实现的目标：

我们假设目前中间的3个菜单是444 555 666

一次可以看到3个菜单，其他所有菜单都将被隐藏。
点击“moveRight”会将菜单移至+1，即555 666 777将会显示，其余全部将被隐藏。
点击'moveLeft'会将菜单改为-1，即333 444 555将会显示，其余全部将被隐藏。

这可以用javascript实现吗？我是js的新手，任何assitacne都会非常感激。

注意：我的网页非常复杂，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>

CSS

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

Answer 1

我认为使用当前设置执行此操作的最佳方法是根据当前所选项目中的内容将类隐藏到要隐藏的项目中。

我添加了一个$scope.leftMost变量来监控$scope.items中可见区域左侧的索引。

然后为名为$scope.items的每个isVisible元素添加了一个布尔值。

在html文件中，我们添加一个ng-class，根据此布尔值ng-class="{ hidden: !item.isVisible}"

切换一个类

然后根据您已定义的moveLeft和moveRight方法，我们使用$scope.leftMost变量根据需要切换isVisible布尔值。

同样引入.hidden类的一点CSS魔法。

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

PLUNKER

其他

除了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; }])

Answer 2

赞this？

我修改了您在评论中发布的小提琴（http://jsfiddle.net/j23LbLko/）

您可以将动画更改为您想要的任何延迟，它当前设置为0。

<强> JS

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

编辑（下方）

现在只是为了让您知道，当前时间提供的答案（我自己和haxxxton）都有隐藏在视图中的元素。这意味着当项目在屏幕上左右移动时，整个网页的滚动会发生变化（从左到右）。这是因为元素仍然存在，并且只是隐藏在视线之外。您的最佳选项是使用我之前评论中包含的jsfiddle（this）并更改以下值：

在 CSS ：#outer { width:448px; } 至 #outer { width:336px; }
在 JS （在左键单击事件中）：if (parseInt($('#menulist').css('margin-left'), 10) >= -784) 到 if (parseInt($('#menulist').css('margin-left'), 10) >= -896)

<强> JS

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

做一些＆＃39; li＆＃39;在ul中可见并隐藏其他人

2 个答案: