响应式菜单显示和点击隐藏答案

【问题标题】：Responsive menu show and hide on click响应式菜单显示和点击隐藏
【发布时间】：2016-06-21 22:35:08
【问题描述】：

我正在尝试编写响应式菜单。它实际上有效，但我无法在 CSS 中获得点击效果。此刻，我正在使用悬停。如何在屏幕宽度低于 750 像素时做到这一点，我必须从图片中单击菜单。数字 2 (ul) 从图片显示菜单。 3号（里）？这是一个单页网站，所以当我从下拉菜单中单击某些元素时，它应该隐藏菜单 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;
    }
}

【问题讨论】：

标签： javascript jquery html css

【解决方案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 中的工作示例。

【讨论】：

不要忘记，您只需要在菜单按钮“可见”时才显示下拉菜单（“onClick”） - 否则每次用户单击菜单时都会显示全宽...我认为您需要在函数中进行初步检查以检查“最小”菜单按钮是否可见，然后运行“if(menuVisible)”函数
不，您不需要在 JS 中进行这样的检查。您可以在 CSS 媒体查询中实现这一点。如果按钮被点击，它必须是可见的。
好点。很好的一点。现在还不是上午 10 点……我还没有完全醒来：P
好吧，所以我必须创建一个菜单按钮，因为现在（在响应模式下）它只是带有背景图像和左侧位置的 ul :)
您的问题得到解答了吗？

【解决方案2】：

这样的事情怎么样：

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

【讨论】：

【解决方案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 会滑动。

【讨论】：