Question

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

这是来自codepen.io的 DEMO

当你从demo中点击红色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正确处理位置：）

CSS tabindex单击隐藏主div

1 个答案: