如何使CSS下拉菜单出现/更改单击

Question

我有一个网页，主要div为1000px×1000px。在主div内部，顶部有一个带有四个部分的水平条，每个部分占据1/4的空间。每个部分都有一些文本[包裹在h2标签中]，水平/垂直居中在1/4部分的中间，每个部分必须生成一个下拉菜单。

对于下拉菜单[必须同时适用于移动设备和桌面设备]，我借用了一个复选框[check for make dropdown visible，uncheck for invisible]的想法，但它没有正常工作。复选框很小，如果它不可见，几乎不可能知道点击检查/取消选中的位置。如果用户点击/点击1/4区域中的ANYWHERE，我希望显示下拉菜单。

1/4部分下拉菜单的水平行如下所示：

^请注意，他们实际上并没有工作。

HTML代码：

<div id="Media_Choices">
    <div id="Video" class="media_choice"> <h2>Video▼</h2> </div>
    <div id="Pictures" class="media_choice"> <h2>Pictures▼</h2> </div>
    <div id="Audio" class="media_choice"> <h2>Audio▼</h2> </div>
    <div id="Stories" class="media_choice"> <h2>Stories▼</h2> </div>
</div>

CSS：

#Media_Choices {
    width: 100%;
    max-height:40px;
    min-height:40px;
}
.media_choice {
    display: inline;
    float: left;
    width: 24.5%;
    max-height: 38px;
    min-height: 38px;
    text-align: center;
    vertical-align: middle;
    line-height: 38px;       /* the same as your div height */
}
#Video {
}
#Pictures {
}
#Audio {
}
#Stories {
}

如果您可以在下拉菜单关闭时将▼向下箭头变为▲，并在菜单启动时恢复为▼向下箭头，则可获得额外信用。你不需要使用基于复选框的技术[我知道有一个悬停选项]，但是跨平台工作的任何东西都是好的。

作为参考，复选框最初是使用以下代码[取自另一个问题]实现的，但是在此解决方案中复制粘贴并更改框内的文本不够好：

<input class="dropdowninput" type="checkbox" id="dropdownbox1"/>
<div class="dropdownbox">
    <label for="dropdownbox1">Open dropdown</label>
    <ul class="dropdown">
        <li>...</li><li>etc</li>
    </ul>
</div>
with CSS:

.dropdowninput, .dropdown {display:none;}
.dropdowninput:checked + .dropdownbox .dropdown {display:block;}

Answer 1

如果我理解你正确你想要创建一个响应下拉菜单，你想要在菜单出现/消失时改变箭头，如果是这种情况，一种方法是将事件监听器附加到菜单在点击时显示/隐藏子菜单的项目，使用css和javascript，您可以执行以下操作：

.media_choice > h2:after {
    display: inline-block;
    content: '▼';
}
.media_choice.dropped > h2:after {
    content: '▲';
}
.media_choice > ul {
    display: none;
}
.media_choice.dropped > ul {
    display: block;
}

使用javascript添加事件监听器：

$(document).ready (function()
{
    $('.media_choice').on ('click', function()
    {
        $(this).toggleClass ('dropped');
    });
});

JSFiddle

Answer 2

这里使用的是复选框，没有JS。

nav {
  width: 80%;
  margin: 20px auto;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: none;
  /* to contain the floats */
}
nav li {
  padding: 0;
  margin: 0;
  width: 25%;
  float: left;
  position: relative;
  white-space: nowrap;
}
nav input {
  display: none;
}
nav label {
  display: block;
  border: 1px solid black;
  padding: 10px;
  cursor: pointer;
}
nav label:hover {
  background: #ccc;
}
nav a {
  display: block;
  padding: 10px;
}
nav a:hover {
  background: #ccc;
}
nav label:after {
  content: '▼';
  font-size: 10px;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  border: 1px solid red;
  box-sizing: border-box;
  background: #fff;
  width: 100%;
}
nav ul ul li {
  width: 100%;
  float: none;
}
nav input:checked ~ ul {
  display: block;
}
nav input:checked ~ label:after {
  content: '▲';
}

<!-- http://codepen.io/allicarn/pen/gPPmZZ -->
<nav>
  <ul>
    <li>
      <input type="checkbox" id="navitem1" name="navinputs" />
      <label for="navitem1">Menu Item #1</label>
      <ul>
        <li><a href="#">Sub Menu Item #1a</a></li>
        <li><a href="#">Sub Menu Item #1b</a></li>
        <li><a href="#">Sub Menu Item #1c</a></li>
        <li><a href="#">Sub Menu Item #1d</a></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="navitem2" name="navinputs" />
      <label for="navitem2">Menu Item #2</label>
      <ul>
        <li><a href="#">Sub Menu Item #2a</a></li>
        <li><a href="#">Sub Menu Item #2b</a></li>
        <li><a href="#">Sub Menu Item #2c</a></li>
        <li><a href="#">Sub Menu Item #2d</a></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="navitem3" name="navinputs" />
      <label for="navitem3">Menu Item #3</label>
      <ul>
        <li><a href="#">Sub Menu Item #3a</a></li>
        <li><a href="#">Sub Menu Item #3b</a></li>
        <li><a href="#">Sub Menu Item #3c</a></li>
        <li><a href="#">Sub Menu Item #3d</a></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="navitem4" name="navinputs" />
      <label for="navitem4">Menu Item #4</label>
      <ul>
        <li><a href="#">Sub Menu Item #4a</a></li>
        <li><a href="#">Sub Menu Item #4b</a></li>
        <li><a href="#">Sub Menu Item #4c</a></li>
        <li><a href="#">Sub Menu Item #4d</a></li>
      </ul>
    </li>
  </ul>
</nav>