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

8月14日更新了一下(刚发现classList原本就有toggle用法,我却绕了个圈去实现toggle😓)

开始正题

一共需要修改两个文件

  • header.php
  • style.min.css

修改header.php

ctrl+F找到下面这一行

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

修改为

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

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

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

修改style.min.css

由于CSS是压缩的,修改的时候要仔细点啊。

ctrl+F找到下面的内容(只有1处位置)

.navbar-mobile-menu:hover>ul

修改为

.navbar-mobile-menu-on ul

ctrl+F找到下面的内容(还有9处位置,建议使用“替换”工具)

.navbar-mobile-menu:hover

修改为

.navbar-mobile-menu-on

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

其他说明

这个修改方法是很基础的了,属于必改内容,由于我还修改了一些我个人认为冗余的其他相关内容(内容不多,但是不容易表述出来😖),所以这个基础方法我是没有测试的,但是应该是没问题的,请放心食用,如过真的有什么问题,请留言吧!😎

已经使用原版主题测试过了,是没问题的,请放心食用。