0

折叠导航，就像你从 Twitter Bootstrap 中得到的一样，是一种“全有或全无”的方法，它要么显示所有导航元素，要么隐藏所有导航元素。

但是，随着空间越来越小，有没有办法逐步隐藏导航元素？那是：

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

我总是可以对像素值进行硬编码，但是如果我添加一个链接元素或更改一个链接元素的文本，我不必负责调整像素值的解决方案会很棒。

4

2 回答 2

1

我写了一个你要做什么的例子：

我认为您的 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>

如您所见，我添加了一个 javascript 标签<script type="text/javascript" src="js/resize.js"></script> in the head of the page，该文件如下所示：

// 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() | jQuery

希望对你有帮助，如果你对代码有任何疑问，请写评论^^

于 2013-06-14T14:14:54.593 回答
1

检查媒体查询，它们可能有助于产生这种行为媒体查询

于 2013-06-14T12:17:41.693 回答