WordPress面板展开时边框颜色切换异常问题求助

问题出在你使用的:active和:focus-visible都是瞬时状态：

• :active仅在鼠标按下元素时生效，松开后立即失效
• ul元素默认无法获得焦点，:focus-visible自然也无法持续生效

要实现面板展开时边框颜色保持变化，需要通过添加持久化的CSS类来标记展开状态，再通过类选择器应用样式。

步骤1：修改JavaScript代码 #

在点击切换面板的逻辑中，给父级的.body_panel添加/移除expanded类，标记面板的展开/收起状态：

$('.body_panel').find('li').click(function () {
    const $parentUl = $(this).parent(); // 获取当前li的父级ul（.body_panel）
    const $childUl = $parentUl.find("ul").eq(0);
    
    if ($childUl.is(':visible')) {
        $(this).children('.icon-title-left_panel').show();
        $(this).children('.icon-title-down_panel').hide();
        $parentUl.removeClass('expanded'); // 收起时移除类
    } else {
        $(this).children('.icon-title-left_panel').hide();
        $(this).children('.icon-title-down_panel').show();
        $parentUl.addClass('expanded'); // 展开时添加类
    }
});

$('.MyPanel').find('li').click(function (evt) {
    evt.stopPropagation();
    $(this).children('ul').slideToggle();
});

步骤2：修改CSS代码 #

移除原来的:active和:focus-visible样式，添加针对expanded类的样式：

/* 替换原来的:active和:focus-visible样式 */
.MyPanel ul.expanded {
    border: 2px solid #ff000059 !important;
}

完整代码示例 #

JavaScript #

$('.body_panel').find('li').click(function () {
    const $parentUl = $(this).parent();
    const $childUl = $parentUl.find("ul").eq(0);
    
    if ($childUl.is(':visible')) {
        $(this).children('.icon-title-left_panel').show();
        $(this).children('.icon-title-down_panel').hide();
        $parentUl.removeClass('expanded');
    } else {
        $(this).children('.icon-title-left_panel').hide();
        $(this).children('.icon-title-down_panel').show();
        $parentUl.addClass('expanded');
    }
});

$('.MyPanel').find('li').click(function (evt) {
    evt.stopPropagation();
    $(this).children('ul').slideToggle();
});

CSS #

.MyPanel {
    max-width: 1200px;
    width: 85%;
    display: block;
    margin: 2rem auto 1rem;
    padding: 6px;
    text-align: right;
    direction: ltr;
    overflow: hidden;
}

.MyPanel ul {
    border: 2px solid #f3f3f359;
    box-shadow: 0 0 2px #000, inset 0 0 200px #f3f3f375;
    padding: 20px 25px 55px;
    list-style: none;
    border-radius: 20px;
    margin-bottom: 2rem;
    transition: border-color 0.3s ease; /* 添加过渡动画让颜色变化更平滑 */
}

/* 新增的展开状态样式 */
.MyPanel ul.expanded {
    border: 2px solid #ff000059 !important;
}

.MyPanel ul ul li {
    padding-top: 50px;
}

.MyPanel ul li {
    cursor: pointer;
    position: relative;
    font-family: 'byekan';
    font-size: 25px;
}

.MyPanel ul li h3 {
    position: absolute;
    top: -25px;
    right: 0;
    width: 92%;
    padding: 0 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    direction: rtl;
}

.MyPanel ul li h3:hover {
    color: #5000ff;
    text-shadow: 0 0 2px #e63131, 0 0 4px #fff;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.MyPanel ul.box-contect_panel li.contect_panel hr.contect_panel-hr-start,
.MyPanel ul.box-contect_panel li.contect_panel hr.contect_panel-hr-end {
    width: 90%;
    border-top: 5px solid #0fd2ff;
    margin: 20px auto 0;
    border-radius: 50%;
    list-style: none;
}

.MyPanel ul.box-contect_panel li.contect_panel hr.contect_panel-hr-end {
    margin: 50px auto 0;
}

.MyPanel ul.box-contect_panel li.contect_panel h4 {
    line-height: 50px;
    text-align: justify;
    font-family: 'samim';
    font-size: 20px;
    direction: rtl;
    width: 90%;
    margin: 40px auto 0;
}

.MyPanel ul li .icon-title-left_panel,
.MyPanel ul li .icon-title-down_panel {
    position: absolute;
    top: -40px;
    left: 0;
    font-size: 35px;
    color: #80c2fe;
}

.MyPanel ul li .icon-title-left_panel:hover,
.MyPanel ul li .icon-title-down_panel {
    color: #0086ff;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.MyPanel ul li .icon-title-down_panel {
    display: none;
    color: #ff8484;
}

.MyPanel ul li .icon-title-down_panel:hover {
    color: #f00;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.MyPanel ul li ul {
    display: none;
    box-shadow: none;
    border: none;
    margin: 0 0 -60px;
}

.MyPanel ul li ul li {
    cursor: context-menu;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" />

<div class="MyPanel">
    <ul class="body_panel">
        <li class="title_panel">
            <p class="bi bi-arrow-left-square-fill icon-title-left_panel">&shy;</p>
            <p class="bi bi-arrow-down-square-fill icon-title-down_panel">&shy;</p>
            <h3>title</h3>
            <ul class="box-contect_panel">
                <li class="contect_panel">
                    <hr class="contect_panel-hr-start">
                    <h4>
                       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis veniam voluptas doloremque saepe sapiente! Dolorum fugiat excepturi velit culpa ab.
                    </h4>
                    <hr class="contect_panel-hr-end">
                </li>
            </ul>
        </li>
    </ul>
</div>

<div class="MyPanel">
    <ul class="body_panel">
        <li class="title_panel">
            <p class="bi bi-arrow-left-square-fill icon-title-left_panel">&shy;</p>
            <p class="bi bi-arrow-down-square-fill icon-title-down_panel">&shy;</p>
            <h3>title</h3>
            <ul class="box-contect_panel">
                <li class="contect_panel">
                    <hr class="contect_panel-hr-start">
                    <h4>
                       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis veniam voluptas doloremque saepe sapiente! Dolorum fugiat excepturi velit culpa ab.
                    </h4>
                    <hr class="contect_panel-hr-end">
                </li>
            </ul>
        </li>
    </ul>
</div>

内容的提问来源于stack exchange，提问作者Developer