【发布时间】：2016-03-21 13:42:20
【问题描述】：
我有一个网页，主 div 为 1000 像素 x 1000 像素。在主 div 内部，在顶部，有一个水平条，分为四个部分，每个部分占据 1/4 的空间。每个部分都有一些文本[包装在 h2 标签中]，水平/垂直居中在 1/4 部分的中间，每个部分必须生成一个下拉菜单。
对于下拉菜单 [必须在移动设备和桌面上都可以使用]，我借用了使用复选框 [检查使下拉菜单可见，取消选中不可见] 的想法，但它无法正常工作。复选框很小，如果它不可见，几乎不可能知道在哪里单击以选中/取消选中。如果用户在 1/4 部分区域中单击/点击 ANYWHERE，我希望出现下拉菜单。
^ 请注意，它们实际上不起作用。
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;}
【问题讨论】：
-
你有一个有用的菜单吗？
-
您说您正在使用复选框，但您的代码并未反映这一点。请尝试使用复选框，以便我们可以看到您哪里出错了。
-
这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。
-
我做复选框的方式是复制粘贴另一个问题：
-
@MichaelLafayette 这个网站的重点是学习，而不是“把事情做好”。这就是为什么我们都要求澄清并查看您的尝试，以便我们可以帮助您学习。无需咬（试图）喂你的手。
标签： javascript jquery html css