CSS tabindex 单击隐藏主 div

Question

我正在尝试用 css 制作一个 tabindex 菜单。

这是我的 DEMO 来自 codepen.io

当您单击演示中的红色 div 时，气泡菜单将打开。但是，当您单击文本时，气泡 div 不会隐藏。

点击.hid类隐藏.eddel怎么办？

我知道我可以用 jquery 做到这一点，但我想了解我是否可以用 CSS 做到这一点。

<div tabindex="0" class="p_change">
    <ul class="eddel">
        <li class="hid">TEXT1</li>
        <li class="hid">TEXT2</li>
    </ul>
</div>

CSS

.p_change {
margin-left:515px;
 position:absolute;
 cursor:pointer;
}
.p_change:before {
    content: "";

}
.p_change:focus {
    pointer-events: none;

}

.p_change:focus .eddel {
    opacity: 1;
    visibility: visible;
}

.eddel {
    pointer-events: auto;
    position: absolute;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}

.p_change.no-pointer-events {
    pointer-events: auto !important;
}

.p_change.no-visibility .eddel {
    visibility: visible !important;
    display: none;
}

.p_change.no-visibility:focus .eddel {
    display: block;
}

.p_change.no-opacity .eddel {
    opacity: 1 !important;
}

.p_change {
outline: 0;
margin-top:10px;
}
.p_change:before {
    padding: 5px 10px;
    background-color: red;
}
.eddel {
  border:1px solid #d8dbdf;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
    background-image: -moz-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
    background-image: -o-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
    background-image: -ms-linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
    background-image: linear-gradient(top, #2cbdf2 0%,#fafafa 0%,#f5f5f5 100%);
    -webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    padding:0;
    width:80px;
    margin-top: 15px;
    margin-left: -50px;
    padding-top: 4px;
    padding-bottom:4px;
}
.eddel a{
    width:80px;
    height:25px;
    text-decoration:none;
  font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
  font-size:13px;
  color:#000;
    }

/* arrow for the expanding part */
.eddel:after 
{
content: "";
position: absolute;
top: -9px;
left: 47px;
border-style: solid;
border-width: 0 7px 8px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
}


.eddel:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 8px;
    border-color: #fafafa transparent;
    display: block;
    position: absolute;
    top: -8px;
    left:47px;
    z-index:1;
}
.eddel li {
    cursor:pointer;
    list-style-type: none;
    white-space: nowrap;
    width:80px;
    height:25px;
    text-align:left;
    line-height:25px;
    text-indent:5px;
    padding:0;
}
.eddel li:hover {
    background:#3b5998;
    width:80px;
    height:25px;
    padding:0px;
    margin:0px;
    cursor:pointer;
    color:#FFF;
    }
.eddel li:hover a {   color: #FFF; }
.p_change {
  text-align: left;
}

Answer 1

问题是 .eddel 在 .p_change 中。然后当你点击它时，.p_change 仍然有 :focus。我建议您的解决方案是稍微更改 HTML 结构，例如:

<h1>Please click the red div</h1>
<div class="container">
    <div tabindex="0" class="p_change"></div>
    <ul class="eddel">
        <li class="hid">TEXT1</li>
        <li class="hid">TEXT2</li>
    </ul>
</div>

然后你可以使用 .p_change:focus + .eddel 而不是 .p_change:focus .eddel 作为选择器。

DEMO

注意:.container 是为了正确处理位置 :)