0

私のページは 2 つの側面に分かれています。左はメニュー、右は非表示の 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

私の理解が正しければ、ドロップダウンの 1 つをクリックした後にメニューを折りたたむ必要がありますよね? これを実現する最も簡単な方法は、次の行を変更することです。

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

そして、これを作る：

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

これが意味することは、h2 (メニュー) をクリックするか、メニュー項目の 1 つをクリックすると、それが折りたたまれるということです。

ここで更新されたフィドルを見ることができます: DEMO

于 2013-10-23T22:56:50.063 に答える