Javascript CSS：折叠导航，一次一个元素_Javascript_Css

Javascript CSS：折叠导航，一次一个元素

javascript css

Javascript CSS：折叠导航，一次一个元素,javascript,css,Javascript,Css,折叠导航，就像从Twitter引导中获得的导航一样，是一种“要么全部显示，要么什么都不显示”的方法，它要么显示所有导航元素，要么隐藏所有导航元素但是，当空间越来越小时，有没有一种方法可以一个一个地增量隐藏导航元素？即: 640px: Link 1 | Link 2 | Link 3 | Link 4 | Link 5 600px: Link 1 | Link 2 | Link 3 | Link 4 | More 560px: Link 1 | Link 2 | Link 3 | More

折叠导航，就像从Twitter引导中获得的导航一样，是一种“要么全部显示，要么什么都不显示”的方法，它要么显示所有导航元素，要么隐藏所有导航元素

但是，当空间越来越小时，有没有一种方法可以一个一个地增量隐藏导航元素？即:

640px:
Link 1 | Link 2 | Link 3 | Link 4 | Link 5

600px:
Link 1 | Link 2 | Link 3 | Link 4 | More

560px:
Link 1 | Link 2 | Link 3 | More

我总是可以硬编码像素值，但如果有一个解决方案，比如说，我添加了一个链接元素或更改了一个链接元素的文本，我就不必调整像素值，那就太好了。

检查媒体查询它们可能有助于实现这种行为

我写了一个示例，说明你要做什么：

我认为您的html代码如下所示：

<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>

<script type="text/javascript" src="js/resize.js"></script>
</head>
<body>
<div id="navigation">
    <a href="#" id="link1">link1</a> <span id="2">|</span> <a href="#" id="link2">link2</a> <span id="3">|</span> <a href="#" id="link3">link3</a> <span id="4">|</span> <a href="#" id="link4">link4</a> <span id="5">|</span> <a href="#" id="link5">link5</a> 
</div>

</body>
</html>

// resize.js

$(document).ready(function(){
  // add a (more) link with javascript to ensure that it exist only if javascript is enabled
  $("#navigation").append('<a href="#" id="more">more</a>'); // #navigation is a div container of our links

  // in the load of document , you check the width of the browser and apply hide or show links switch what do you need
  var width_of_window = $(window).width();

  if (width_of_window <= 560) {
    $("#link5, #link4, #5, #4").hide(); 
  }

  if(width_of_window > 560 && width_of_window <= 600){
    $("#link4").show(); $("#link5").hide(); 
  }

  if(width_of_window >= 640){
    $("#more").hide();
  }


  // here resize function is handled when you resize the navigator 
  $(window).resize(function() {
    width_of_window = $(window).width(); // get the width of the window each time you resize it

  //apply what do you need

    if (width_of_window <= 560) {
        $("#link5, #link4, #5, #4").hide(); // #link5 and link4 are the id of links and #5, #4 are separator '|' between links (i added | separator between span, see html code)
        if( $("#more").is(':hidden') ){
            $("#more").show();
        }
     }

     if(width_of_window > 560 && width_of_window <= 600){

        $("#link4").show(); $("#link5").hide(); 
        if( $("#more").is(':hidden') ){
            $("#more").show();
        }
     }


     if(width_of_window >= 640){
        $("#more").hide();
        $("#link4, #link5").show();
     }
  });


});


|  |  |  |

如您所见，我在页面头部添加了一个javascript标记

，该文件如下所示：
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>

<script type="text/javascript" src="js/resize.js"></script>
</head>
<body>
<div id="navigation">
    <a href="#" id="link1">link1</a> <span id="2">|</span> <a href="#" id="link2">link2</a> <span id="3">|</span> <a href="#" id="link3">link3</a> <span id="4">|</span> <a href="#" id="link4">link4</a> <span id="5">|</span> <a href="#" id="link5">link5</a> 
</div>

</body>
</html>

// resize.js

$(document).ready(function(){
  // add a (more) link with javascript to ensure that it exist only if javascript is enabled
  $("#navigation").append('<a href="#" id="more">more</a>'); // #navigation is a div container of our links

  // in the load of document , you check the width of the browser and apply hide or show links switch what do you need
  var width_of_window = $(window).width();

  if (width_of_window <= 560) {
    $("#link5, #link4, #5, #4").hide(); 
  }

  if(width_of_window > 560 && width_of_window <= 600){
    $("#link4").show(); $("#link5").hide(); 
  }

  if(width_of_window >= 640){
    $("#more").hide();
  }


  // here resize function is handled when you resize the navigator 
  $(window).resize(function() {
    width_of_window = $(window).width(); // get the width of the window each time you resize it

  //apply what do you need

    if (width_of_window <= 560) {
        $("#link5, #link4, #5, #4").hide(); // #link5 and link4 are the id of links and #5, #4 are separator '|' between links (i added | separator between span, see html code)
        if( $("#more").is(':hidden') ){
            $("#more").show();
        }
     }

     if(width_of_window > 560 && width_of_window <= 600){

        $("#link4").show(); $("#link5").hide(); 
        if( $("#more").is(':hidden') ){
            $("#more").show();
        }
     }


     if(width_of_window >= 640){
        $("#more").hide();
        $("#link4, #link5").show();
     }
  });


});

//resize.js
$（文档）.ready（函数（）{
//添加一个（更多）与javascript的链接，以确保只有启用javascript时该链接才存在
$（“#导航”）.append（“”）；/#导航是我们链接的div容器
//在加载文档时，请检查浏览器的宽度，并应用“隐藏”或“显示链接”切换您需要什么
var width_of_window=$（window.width（）；
if（窗口宽度560和窗口宽度640）{
$（“#更多”）.hide（）；
}
//在这里，当您调整导航器的大小时，将处理调整大小功能
$（窗口）。调整大小（函数（）{
width_of_window=$（window）.width（）；//每次调整窗口大小时获取窗口的宽度
//申请你需要什么
if（窗口宽度560和窗口宽度640）{
$（“#更多”）.hide（）；
$（“#link4，#link5”）.show（）；
}
});
});

有关调整大小功能的更多详细信息，请参见此处的文档
我希望这能帮助您，如果您对代码有任何疑问，请写一条评论^^
为什么我不这样做？如果你在桌面上，调整屏幕大小，使网页显示的空间减少25像素，那么所有导航链接都会隐藏在一个下拉列表中。在这种情况下，我只希望将最右边的一个或两个元素隐藏在“显示更多”下拉列表中。请参见此处：接受的答案就是您正在寻找的答案。对于媒体查询，我建议不要使用JS方法。它只能通过媒体查询（如此纯粹的CSS）来实现。再说一次，也许客户端的浏览器不支持媒体查询。媒体查询也可以是一个好的解决方案，但我们不知道他喜欢什么，我认为如果他只想做导航，那么用js做这件事是个好主意，并切换他的标签，他想要js和css！最后，我们向他建议不同的方法，他可以采取最好的方法：D汉克斯；我选择了JS方法。媒体查询或许可以做到这一点；但是JS的实现速度更快，而且我的日程安排也很紧……所以这是目前的解决方案。