$(document).ready(function() { $(".menu-icon").on("click", function() { $("nav ul").toggleClass("showing"); }); } );

该段Javascript代码实现了一个菜单图标的点击事件。当菜单图标被点击时，程序将toggle显示和隐藏菜单列表的类名“showing”。

原理

该代码利用了jQuery库中的$()函数来选取HTML元素，并在document加载完成后（即ready事件被触发时），绑定一个click事件。当指定元素（这里是.menu-icon）被点击时，执行切换菜单列表显示或隐藏的操作。

具体实现

在这段代码中，$()函数的作用是选取HTML元素，.menu-icon是用于筛选class为menu-icon的元素，可以是任何HTML元素。on()函数用于给选取的元素绑定一个事件，这里使用click事件。toggleClass()函数切换元素的类名，这里的类名为showing，切换的效果是显示或隐藏菜单列表。

应用场景

该代码可以用于响应式网站的导航菜单设计中。通过点击按钮图标触发菜单列表的显示或隐藏，适应不同尺寸的屏幕，实现网站的响应式布局。

返回Markdown格式的代码片段

# $(document).ready(function() { $(".menu-icon").on("click", function() { $("nav ul").toggleClass("showing"); }); } );

该段Javascript代码实现了一个菜单图标的点击事件。当菜单图标被点击时，程序将toggle显示和隐藏菜单列表的类名“showing”。

## 原理

该代码利用了jQuery库中的$()函数来选取HTML元素，并在document加载完成后（即ready事件被触发时），绑定一个click事件。当指定元素（这里是.menu-icon）被点击时，执行切换菜单列表显示或隐藏的操作。

## 具体实现

在这段代码中，$()函数的作用是选取HTML元素，.menu-icon是用于筛选class为menu-icon的元素，可以是任何HTML元素。on()函数用于给选取的元素绑定一个事件，这里使用click事件。toggleClass()函数切换元素的类名，这里的类名为showing，切换的效果是显示或隐藏菜单列表。

## 应用场景

该代码可以用于响应式网站的导航菜单设计中。通过点击按钮图标触发菜单列表的显示或隐藏，适应不同尺寸的屏幕，实现网站的响应式布局。