下拉不消失时，焦点

我想做一个下拉菜单，将显示子菜单点击使用CSS伪类称为焦点内，但它不工作，如果我点击下拉菜单(点击下拉)再次。

我已经在代码片段中添加了代码，以便您可以运行示例。

.example-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    background: #ffffff;
    border: solid 2px #000000;
}
.example-dropdown {
    position: relative;
}
.example-dropdown > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    flex-direction: column;
    position: absolute;
    background: #ffffff;
    border: solid 2px #000000;
}
.example-dropdown:focus-within > ul {
    display: flex;
}
.example-menu a {
    display: inline-block;
    padding: 0.5rem;
}
.example-dropdown > a {
    display: inline-block;
    padding: 1rem;
    color: #000000;
}
.example-dropdown > a::after {
    content: " \2193"
}

 <ul class="example-menu">
    <li class="example-dropdown">
        <a tabindex="0">Click to dropdown</a>
        <ul>
            <li><a href="http://example.com">Link</a></li>
            <li><a href="http://example.com">Link</a></li>
            <li class="example-dropdown">
                <a tabindex="0">Click to dropdown</a>
                <ul>
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

下拉菜单不会消失。

有什么办法让它起作用吗？

###你需要实现JavaScript来实现切换功能。

这是JS部分的代码，将实现你想要的:

// Parent Dropdown Menu
let menu1 = document.getElementById('parentMenu');
let list1 = document.getElementById('parentList');
// Child Dropdown Menu
let menu2 = document.getElementById('childMenu');
let list2 = document.getElementById('childList');
// Toggle Effect
menu1.onclick = function() {
    if (list1.style.display === 'block') {
        list1.style.display = 'none';
    }
    else {
        list1.style.display = 'block';
    }
}
menu2.onclick = function() {
    if (list2.style.display === 'block') {
        list2.style.display = 'none';
    }
    else {
        list2.style.display = 'block';
    }
}

您需要对代码进行的惟一更改是为希望实现此效果的部分添加id。

我添加了效果到你的下拉菜单(父母和孩子)。

家长:

...
<a tabindex="0" id="parentMenu">Click to dropdown</a>
<ul id="parentList">
...

孩子:

...
<a tabindex="0" id="childMenu">Click to dropdown</a>
<ul id="childList">
...

// Parent Dropdown Menu
let menu1 = document.getElementById('parentMenu');
let list1 = document.getElementById('parentList');
// Child Dropdown Menu
let menu2 = document.getElementById('childMenu');
let list2 = document.getElementById('childList');
// Toggle Effect
menu1.onclick = function() {
    if (list1.style.display === 'block') {
        list1.style.display = 'none';
    }
    else {
        list1.style.display = 'block';
    }
}
menu2.onclick = function() {
    if (list2.style.display === 'block') {
        list2.style.display = 'none';
    }
    else {
        list2.style.display = 'block';
    }
}

.example-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    background: #ffffff;
    border: solid 2px #000000;
}
.example-dropdown {
    position: relative;
}
.example-dropdown > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    flex-direction: column;
    position: absolute;
    background: #ffffff;
    border: solid 2px #000000;
}
.example-dropdown:focus-within > ul {
    display: flex;
}
.example-menu a {
    display: inline-block;
    padding: 0.5rem;
}
.example-dropdown > a {
    display: inline-block;
    padding: 1rem;
    color: #000000;
}
.example-dropdown > a::after {
    content: " \2193"
}

 <ul class="example-menu">
    <li class="example-dropdown">
        <a tabindex="0" id="parentMenu">Click to dropdown</a>
        <ul id="parentList">
            <li><a href="http://example.com">Link</a></li>
            <li><a href="http://example.com">Link</a></li>
            <li class="example-dropdown">
                <a tabindex="0" id="childMenu">Click to dropdown</a>
                <ul id="childList">
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我希望这是您正在寻找的，因为您的问题是有点不清楚，您究竟想要切换效果在哪里。

###如果你不想使用JavaScript，你可以尝试下面的方法。

首先，您应该在html中添加一个复选框元素。

<ul class="example-menu">
    <li class="example-dropdown">
        <a tabindex="0">Click to dropdown</a>
        <input type="checkbox" class="click_effect" name="" id="index-0">
        <ul>
            <li><a href="http://example.com">Link</a></li>
            <li><a href="http://example.com">Link</a></li>
            <li class="example-dropdown">
                <a tabindex="0">Click to dropdown</a>
                <input type="checkbox" class="click_effect" name="" id="index-1">
                <ul>
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                    <li><a href="http://example.com">Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

然后你应该在css文件中添加一些新的属性。

#index-0:checked + ul, #index-1:checked + ul {
  display: flex;
}

现在您需要删除下面的代码。

.example-dropdown:focus-within > ul {
    display: flex;
}