更新

Question

我有一个HTML侧边栏，我想更改用于打开/关闭侧边栏的图标

我的HTML代码是：

<li class="sidebar-toggler-wrapper">
            <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
            <div class="sidebar-toggler">
            </div>
            <div class="clearfix">
            </div>
            <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
        </li>

具有类sidebar-toggler的元素是我单击以打开/关闭侧边栏的元素。如您所见，没有用于定义图标的html（例如：<i class="fa fa-arrow-left"></i>）。所以有一个JS代码设置和更改此图标，但我找不到这个js / line。

我猜Google Chrome Inspector或Firebug中有一个选项可以显示网页中触发的所有事件或类似内容？

我在我的所有项目中搜索了类似＆＃34; $（＆＃39; .sidebar-toggler＆＃39;）＆＃34;但是没有找到有趣的东西。

更新

搜索＆＃39;侧边栏切换器＆＃39;给了我这个代码，坚果没有图标处理的痕迹

// handle the search submit
    $('.sidebar-search .submit').on('click', function (e) {
        e.preventDefault();
        if ($('body').hasClass("page-sidebar-closed")) {
            if ($('.sidebar-search').hasClass('open') == false) {
                if ($('.page-sidebar-fixed').size() === 1) {
                    $('.page-sidebar .sidebar-toggler').click(); //trigger sidebar toggle button
                }
                $('.sidebar-search').addClass("open");
            } else {
                $('.sidebar-search').submit();
            }
        } else {
            $('.sidebar-search').submit();
        }
    });`

感谢您的帮助

Answer 1

Chrome devtools确实有一项功能可以帮助解决这种情况 - 您知道某个事件正在触发，但您不知道代码正在运行的是什么。

请参阅下面的屏幕截图以供参考。

打开来源标签（您可能需要点击箭头才能看到它）。
在左下方面板中，展开标题为事件监听器断点的部分，然后展开鼠标子部分，然后选中单击框。这将导致Chrome调试程序在任何点击事件上暂停。现在点击页面上的元素，Chrome将进入调试模式。
可能会有多个处理程序，有些是您不关心的。使用蓝色恢复脚本执行按钮和/或旁边的控件，深入了解正在运行的代码并搜索您关心的内容。准备好通过一堆jQuery库代码：）

如果您是Chrome的调试器新手，这一开始有点令人生畏。您可能会经历几个错过您想要的循环并且浏览器恢复正常操作。如果发生这种情况，只需点击#toto元素即可重新开始，然后重试。

查看this great video几个月前（2018年1月）调试时发布的Google Chrome开发者YouTube频道。它很短（8分钟）但非常有教育意义。

最新版Chrome（66）中还有一个很棒的功能，它允许您在调试器暂停时从callstack黑名单。如果您安装了Chrome 66并且您遇到了大量的jQuery代码，请在 Callstack 窗格中找到jquery.min.js，右键单击它，选择 Blackbox脚本< / strong>，然后重新触发click断点。 Chrome现在应该绕过jQuery代码，这样可以更轻松地找到您想要的内容。

通过单击html元素触发哪个JS函数

更新

1 个答案: