打开项目用的脚本文件 .. scripts 下面的 main.js

我们的项目用了 jQuery .. 用它定位到特定的元素可以这样 .. $() .. 这里描述一下我们要找的元素 .. 是在 .ui.navbar 里面包装的 .search-icon 下面的小 i ..

用一个 click 方法，就是去监听一下找到的元素的点击事件 .. 有人点了这个元素会执行在这个方法里定义的行为 ..

给它一个匿名函数 .. 函数里面的东西就是要做的事情 ..

添加一个变量，名字是 icon ，它的值是 $(this)， 这个 $(this) 表示的就是发生点击的事件的这个元素 ..

可以先判断一下 .. icon .. 使用一下 text() 方法，它可以得到元素里的文字 .. 看一下是不是等于 search ...

如果是的话 ... 再用一下 icon ，使用一下 text 方法去设置一下元素的文字 .. 设置成 close ..

再用一个 else .. 设置一下其它的情况，如果点击的这个元素里的文字不是 search ，就执行 else 后面的这个代码块 ..

用一下 icon.text 方法，把元素里的文字设置成 search ...

回到浏览器上去测试一下 ..

点一下这个搜索小图标.. 它会变成一个关闭小图标 .. 因为我们替换了小 i 标签里的文字，换成了 close，它就会变成这个关闭小图标 ..

再点一下 .. 这次会把文字替换成 search，所以又会显示一个搜索小图标 ..

回到项目，打开 navbar 这个样式 .. 找到 search-icon .. 这里用一下 cursor 属性 .. 它可以设置鼠标指针 .. 把它设置成 pointer .

现在鼠标放在这个小图标的上面的时候，鼠标指针会变成一个手型 ... 它可以提示用户，这个图标是可以点击的 ...