制作一些'李'在ul可见和隐藏他人

make some 'li' in ul visible and hiding others

本文关键字：隐藏 ul      更新时间：2023-09-26

检查我的PLNKR，如您在plunker:中所见

  1. 菜单人满为患
  2. "moveLeft"answers"moveRight"按钮将使菜单移动-/+1
  3. 如果您进入第一个和最后一个菜单，相应的"moveLeft"answers"moveRight"将被禁用

早些时候，对于menucontainer类，我使用overflow:hidden，因此菜单不流动，但overflow:hidden也被应用于子级菜单，它们正在剪切。所以最后我决定从menucontainer类中删除overflow:hidden。

所以我想到了计数菜单，使可见只需要3个菜单，并隐藏所有其他菜单。我正在努力实现的目标：

假设当前中间的3个菜单是444 555 666

  1. 一次将有3个菜单可见，所有其他菜单都将隐藏
  2. 单击"moveRight"将使菜单移动+1，即555 666 777将可见，其余全部将隐藏
  3. 单击"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>

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

我能想到的对当前设置执行此操作的最佳方法是根据所选3个项目中的当前内容，将一个类应用于要隐藏的项目。

我添加了一个$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;
}])

这样？

我修改了你在评论中发布的小提琴(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（这个），并更改以下值：

  • 在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
        });
    }
});
相关文章：