0

我的页面分为两部分：左侧用于菜单，右侧用于隐藏 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/ 谢谢

4

1 回答 1

0

如果我理解正确，您希望菜单在单击其中一个下拉菜单后折叠，对吗？最简单的方法是修改这一行：

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

并使其成为：

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

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

你可以在这里看到更新的小提琴： DEMO

于 2013-10-23T22:56:50.063 回答