响应式菜单显示并隐藏点击

Question

我试着写一个响应式菜单。它确实有效，但我无法在CSS中获得clik效果。这一刻我正在使用悬停。当屏幕宽度低于750px时如何制作，我必须点击图片中的菜单。数字2（ul）显示来自pic的菜单。 3号（li）？这是一个单页网站，所以当我从下拉菜单中删除一些元素时，它应该隐藏菜单agin（li）。

HTML：

<header>
    <nav id="menu">
        <ul>
            <li class="li"><a href="#">WITAJ</a></li>
            <li class="li"><a href="#">O MNIE</a></li>
            <li class="li"><a href="#">DOŚWIADCZENIE</a></li>
            <li class="li"><a href="#">CO ROBIĘ?</a></li>
            <li class="li"><a href="#">KONTAKT</a></li>
            <li><a href="#">MOJE PRACE</a></li
        ></ul>
    </nav>
</header>

CSS：

@media screen and (max-width: 750px) {      
    header nav#menu ul:hover > li{
        display:block !important;
    }

    header nav#menu ul li{
        display:none !important;
    }
}

Answer 1

您无法在CSS中实现点击效果。为此通常使用JavaScript。 这是一个简单的jQuery解决方案：

$(function() {
  var menuVisible = false;
  $('#menuBtn').click(function() {
    if (menuVisible) {
      $('#myMenu').css({'display':'none'});
      menuVisible = false;
      return;
    }
    $('#myMenu').css({'display':'block'});
    menuVisible = true;
  });
  $('#myMenu').click(function() {
    $(this).css({'display':'none'});
    menuVisible = false;
  });
});

在用户点击条目后，它还会隐藏菜单。

在CSS中，您必须使用媒体查询强制显示菜单。这是一个例子：sfplex

这是此示例的HTML结构：

<div id="menuBtn">click me</div>
<nav id="myMenu">
  <ul>
    <li>entry 1</li>
    <li>entry 2</li>
    <li>entry 3</li>
    <li>entry 4</li>
  </ul>
</nav>

请参阅jsFiddle中的工作示例。

Answer 2

这样的事情怎么样：

$('#menu').on('click', function(){
    $('#menu ul').css("display", "block");
});
$('#menu a').on('click', function(){
    $('#menu ul').css("display", "none");
});

Answer 3

如何将JavaScript用于此目的：

$(document).ready(function(){
  $("#floor").click(function(){
	$("#floor_panel").slideToggle("slow");
  })
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="floor">FLOOR ▾ </div>
		<div id="floor_panel">
			<form name="floor" action="{{ url_for('select_work', url='Floor') }}" method="post">
				{{ floor.name }}
				<div id="choose"><input type="submit" value="Choose"></div>
			</form>
		</div>
</div>

它会显示 floor 面板，按下它 - 面板 floor_panel 将会滑动。