jQuery切换视图点击内部链接关闭及默认展开首个面板的问题

问题1：点击视频链接时阻止切换视图关闭 #

点击视频链接时会触发父元素<li>的点击事件，这是事件冒泡导致的。我们需要给视频链接添加事件处理，阻止事件向上冒泡到<li>，这样点击链接就不会触发面板的折叠/展开逻辑。

问题2：页面加载时首个面板默认展开 #

在页面初始化完成后，主动触发第一个<li>的展开逻辑，直接操作第一个面板的显示状态并修改对应的符号。

修改后的完整代码 #

jQuery 代码

$(document).ready(function () {
    // 初始化：展开第一个面板
    const firstLi = $('#toggle-view li:first');
    const firstPanel = firstLi.children('div.panel');
    firstPanel.slideDown('200');
    firstLi.children('span').html('-');

    // 切换视图的点击逻辑
    $('#toggle-view li').click(function () {
        const text = $(this).children('div.panel');
        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('-');     
        } else {
            text.slideUp('200');
            $(this).children('span').html('+');     
        }
    });

    // 阻止视频链接的事件冒泡
    $('#toggle-view .panel a').click(function (e) {
        e.stopPropagation(); // 阻止事件向上冒泡到li元素
    });
});

CSS 代码（保持原代码即可）

#toggle-view span {
    position:absolute;
    right:5px; top:0;
    color:#ccc;
    font-size:16px;
}

#toggle-view .panel {
    margin:5px 0;
    display:none;
}

代码说明 #

1. 阻止事件冒泡：给面板内的所有链接添加click事件监听，调用e.stopPropagation()，这样点击链接时，事件不会传递到父级的<li>，也就不会触发面板的折叠逻辑。
2. 默认展开第一个面板：在页面加载完成后，直接选中第一个<li>的面板，执行slideDown展开，并将对应的符号改为-，完成初始化状态设置。

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