使UL可見和隱藏其他

Question

一些「禮」檢查我的PLNKR，你可以在plunker看到：

1. 菜單四溢。
2. 'moveLeft'和'moveRight'按鈕將移動菜單 -/+ 1.
3. 如果您到達第一個和最後一個菜單，則相應的'moveLeft'和'moveRight'將被禁用。

早些時候menucontainer類我是用overflow:hidden所以菜單沒有oveflowing，但overflow:hidden是越來越應用到子級別的菜單也，他們被切斷。 因此最後我決定從menucontainer類中刪除overflow:hidden。

所以我想計數菜單，使可見只需要3菜單和隱藏所有其他。的事情，我想實現：

假設目前3菜單這是在中間的是444555666

1. 在時刻3級的菜單將是可見的，其他的都會被隱藏。
2. 點擊'moveRight'會將菜單移位+1，即555666777將會顯示，其餘全部隱藏。
3. 點擊'moveLeft'會將菜單移動-1，即333444555將會顯示，其餘全部隱藏。

這是可以實現與JavaScript？我是新來的任何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

我能想到的與您當前的設立是爲了做到這一點，最好的辦法根據當前選定的3項中的內容，將類應用於要隱藏的項目。

我添加了一個$scope.leftMost變量來監視$scope.items中的索引位於可見區域的左側。

然後爲每個$scope.items元素添加一個布爾值，稱爲isVisible。

在HTML文件中，我們添加一個ng-class該切換基於這個布爾ng-class="{ hidden: !item.isVisible}"

然後基於關閉您已經定義我們使用$scope.leftMost變量來根據需要切換isVisible布爾的moveLeft和moveRight方法的類。

對於.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

Like 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的）都有所只是從視圖中隱藏元素。這意味着當項目在屏幕上左右移動時，整個網頁的滾動更改（從左到右）。這是因爲元素仍然存在，並且只是隱藏在視線範圍內。你最好的辦法是使用我包括在我先前的評論（this一個）的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 
     }); 
    } 
});