如何通过JavaScript控制UIKit Toggle，禁用切换项点击自关闭

问题描述 #

使用JavaScript结合UIKit实现表格行的切换功能，当前功能可正常触发，但点击切换目标（tr.B）时，该行会自动关闭。需求是仅通过tr.A下的<a>标签控制tr.B的展开与关闭，点击tr.B本身不触发关闭操作。

解决方案 #

问题根源在于UIKit的Toggle组件默认会监听目标元素的点击事件来切换显示状态，因此点击tr.B时会触发关闭逻辑。以下两种方法可解决该问题：

方法一：阻止事件冒泡 #

给tr.B添加点击事件监听，阻止事件向上冒泡，避免触发UIKit的Toggle切换逻辑：

$("#Test_Table_Div").on("click", "#Test_Table tr.A a", function() {
  UIkit.toggle("#Test_Table tr.B", { animation: "uk-animation-fade" }).toggle();
});

// 阻止tr.B的点击事件冒泡
$("#Test_Table_Div").on("click", "#Test_Table tr.B", function(e) {
  e.stopPropagation();
});

方法二：修改UIKit Toggle配置 #

通过Toggle组件的配置项，明确指定仅<a>标签作为触发元素，禁用目标元素自身的切换触发：

// 初始化Toggle时绑定触发元素与目标元素
const toggle = UIkit.toggle("#Test_Table tr.A a", {
  target: "#Test_Table tr.B",
  animation: "uk-animation-fade",
  toggle: false // 禁用目标元素的切换触发
});

// 绑定点击事件执行切换
$("#Test_Table_Div").on("click", "#Test_Table tr.A a", function() {
  toggle.toggle();
});

完整代码示例 #

HTML代码

<!doctype html>
<html>
    <body>
        <div id="Test_Table_Div">
            <table id="Test_Table">
                <tr class="A">
                    <td>
                         <a>Link_Click_Toggle</a>
                    </td>
                </tr>
                <tr class="B" hidden>
                    <td>
                        <table> 
                            <tr><td>123</td></tr> 
                            <tr><td>ABC</td></tr> 
                        </table> 
                    </td>
                </tr>
            </table>
        </div>
    </body>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.5/dist/js/uikit.min.js"></script>
</html>

JavaScript代码（推荐方法一）

$("#Test_Table_Div").on("click", "#Test_Table tr.A a", function() {
  UIkit.toggle("#Test_Table tr.B", { animation: "uk-animation-fade" }).toggle();
});

$("#Test_Table_Div").on("click", "#Test_Table tr.B", function(e) {
  e.stopPropagation();
});

原理说明 #

• 方法一通过e.stopPropagation()截断tr.B的点击事件传递路径，让UIKit的Toggle组件无法捕获到该事件，从而避免触发关闭操作。
• 方法二通过配置项直接限定触发切换的元素为<a>标签，同时禁用目标元素的切换触发逻辑，从根源上排除误触发的可能。

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