Typecho主题Pinghsu - 添加移动端导航菜单关闭

刚开始使用Typecho时，看上了Chakhsu的主题：Pinghsu，贼漂亮有没有😁 很多朋友反应主题在移动端的导航菜单不能关闭，F12看了一下，由于菜单的展开完全用CSS(hover)实现的，所以在移动端只能靠点击除❌以外的其他位置才能关闭菜单。还看到代码后面有个onclick，想必作者考虑过js，但是最终还是没有使用🤣

开始正题

一共需要修改两个文件

header.php style.min.css 修改header.php ctrl+F找到下面这一行

1

<div class="navbar-mobile-menu" onclick="">

修改为

1

<div class="navbar-mobile-menu" onclick="navbarSwith()">

并在这一行上面另起一行加入下面的内容

1

<script>function navbarSwith(){document.getElementsByClassName("navbar-mobile-menu")[0].classList.toggle("navbar-mobile-menu-on")}</script>

修改style.min.css 由于CSS是压缩的，修改的时候要仔细点啊。

先ctrl+F找到下面的内容（只有1处位置）

1

.navbar-mobile-menu:hover>ul

修改为

1

.navbar-mobile-menu-on ul

再ctrl+F找到下面的内容（还有9处位置，建议使用“替换”工具）

1

.navbar-mobile-menu:hover

修改为

1

.navbar-mobile-menu-on

至此，完成，去试试效果吧😜

其他说明

修改后，点开菜单后必需手动点击❌才能关闭菜单，已不能通过滑动关闭，有得有失，最终改回原版。