Question

我的页面分为两个方面：左边是菜单，右边是隐藏的div。它是一个响应式网站，所以在手机上菜单崩溃了。好吧，任何设备都完美！但是......列表菜单很长。适用于PC或平板电脑屏幕，但在移动设备中它会填满所有屏幕，因此当您点击某个项目时，它看起来没有任何反应（当然！隐藏的div位于屏幕外的菜单下！）只有滚动才能看到div ！好吧，我试过但是我点击了一个项目后无法折叠菜单（所以你可以立即在移动设备上看到div。）它只是点击标题就会折叠和展开。我试过，但我唯一的结果就是在宽屏幕上折叠菜单（当然不是我想要的！你需要重新加载页面才能看到菜单）。可以请某人帮我制作我需要的剧本吗？这是我的示例html和CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Settori d'intervento</title>
<link href="Assets/settoriTEST.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="assets/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
  var collapsed = true;
  $('nav2>h2').click(function() {
    collapsed = !collapsed;
    formatSidebar();
  });
  $(window).resize(formatSidebar);
  formatSidebar();

  function formatSidebar() {
    if ($(window).width() > 766) {
      $('nav2').removeClass('collapsible');
      $('nav2 #menuSX').show();
    } else {
      $('nav2').addClass('collapsible');
      if (collapsed) { 
        $('nav2 #menuSX').hide();
        $('nav2 > h2').removeClass('minus');
      } else {
        $('nav2 #menuSX').show();
        $('nav2 > h2').addClass('minus');
      }
    }
  };
});
</script>
<script type="text/javascript">
$(document).ready(function() {
    $(".menubox").hide();
$(".menubox:first").hide();

    $(".menuitem").click(function(event) {
        event.preventDefault();
        $(".menubox").hide();
        var relatedDivID = $(this).attr('href');

        $("" + relatedDivID).fadeToggle("slow","linear"); 
    });
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs ul li a').click(function(){ 
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active'); 
var currentTab = $(this).attr('href'); 
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>
</head>
<body >
<div id="content">
  <div id="hide_show">
    <nav2>
      <h2>Menù </h2>
      <div id="menuSX">
        <ul>
          <li><a class="menuitem" href="#A">A</a></li>
          <li><a class="menuitem" href="#B">B</a></li>
          <li><a class="menuitem" href="#C">C</a></li>
        </ul>
      </div>
    </nav2>
    <div id="Content3">
      <div class="menubox" id="A">
        <h2>A</h2>
      </div>
      <div class="menubox" id="B">
        <h2>B</h2>
      </div>
      <div class="menubox" id="C">
        <h2>C</h2>
      </div>
    </div>
  </div>
</div>
</body>
</html>

这是CSS

@charset "utf-8";
/* CSS Document */
nav2 ul, nav2 ol {list-style: none; list-style-image: none; margin: 0; padding: 0;}
nav2.collapsible > h2 {
    background-color: #657A81;
    cursor: pointer;
}
.menuitem {
    display: block;
    background-color: #657A81;
    margin-bottom: 0.2em;
    color: #FFF;
}
.menuitem:hover  {
    background-color: #AE7450;
}
@media only screen and (min-width: 768px) {
nav2 > h2 {display: none;}
nav2 {
    float: left;
    width: 30%;
}
#hide_show {
    float: left;
    width: 100%;
}
#menuSX {
    float: left;
    width: 100%;
}
#Content3 {
    float: right;
    width: 69%;
}
.menubox {
    width: 100%;
}
}

你可以在这个小提琴中看到它：http://jsfiddle.net/stgjB/ 感谢

Answer 1

如果我理解正确，您希望点击其中一个下拉列表后菜单崩溃，对吧？完成此操作的最简单方法是修改此行：

  $('nav2>h2').click(function() {

这样做：

  $('nav2>h2, .menuitem').click(function() {

这意味着如果您单击h2（菜单），或者单击其中一个菜单项，请将其折叠。

您可以在此处看到更新的小提琴： DEMO

单击项目后如何折叠响应式垂直菜单（隐藏显示）？

1 个答案: