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

Question

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

对于下拉菜单[必须在移动设备和桌面上都可以使用]，我借用了使用复选框[检查make下拉菜单可见，取消选中不可见]的想法，但它无法正常工作。该复选框很小，如果它不可见，则几乎不可能知道在哪里点击来检查/取消选中。我想要下拉菜单出现，如果用户在1/4节区域点击/轻按任何地方。

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 { 
} 

额外的信用，如果你能得到▼向下箭头变成一个▲每当下拉菜单下来，然后回复当菜单启动时，变成▼向下的箭头。你不需要使用基于复选框的技术[我知道有一个悬停选项]，但任何跨平台的工作都很好。

仅供参考，复选框被origionally使用下面的代码[从另一个问题采取]实现，但复制粘贴此解决方案，改变盒内的文字不够好：

<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>