手机版<details>无法展开

hbghlyj

手机版<details>无法展开
检查发现被#mask元素挡住

1楼details

test1

kuing

解决了。（副作用未知）

由我想到

为什么只挡住了 details ，而像 tikz 或 asy 那些点击看代码的又不会影响呢？

起，我就意识到这和楼主认为的 z-index 应该无关。
最终发现是 \static\js\mobile\common.js 第 682 行（即 5# 第二段代码的 20 行）的一句：
return false;
阻止了默认行为的执行，把这行注释掉就好了。

色k

那怎么解决？

2楼details

test2

kuing

在手机版，进入帖子时就存在以下 div：
<div id="mask" style="display:none;"></div>
这时无影响，但只要点击 2 楼以上的任意位置它就会变成
<div id="mask" style="display: block; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: transparent; z-index: 100;"></div>
它是用来干啥的？起到什么作用？

如果再点回 1 楼，又会变回 display:none;
据此，只有 2 楼以上的 <details> 才会展不开，为测试，编辑了一下 1、2 楼，果然如此。

hbghlyj

kuing 发表于 2023-5-7 02:25
z-index: 100;"></div>
它是用来干啥的？起到什么作用？

我只知道，当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。

kuing

应该跟以下两段代码有关：
\static\js\mobile\common.js 第 546-600 行：

1. var POPMENU = new Object;
2. var popup = {
3.         init : function() {
4.                 var $this = this;
5.                 $('.popup').each(function(index, obj) {
6.                         obj = $(obj);
7.                         var pop = $(obj.attr('href'));
8.                         if(pop && pop.attr('popup')) {
9.                                 pop.css({'display':'none'});
10.                                 obj.on('click', function(e) {
11.                                         $this.open(pop);
12.                                 });
13.                         }
14.                 });
15.                 this.maskinit();
16.         },
17.         maskinit : function() {
18.                 var $this = this;
19.                 $('#mask').off().on('tap', function() {
20.                         $this.close();
21.                 });
22.         },
24.         open : function(pop, type, url) {
25.                 this.close();
26.                 this.maskinit();
27.                 if(typeof pop == 'string') {
28.                         $('#ntcmsg').remove();
29.                         if(type == 'alert') {
30.                                 pop = '<div class="tip"><dt>'+ pop +'</dt><dd><input class="button2" type="button" value="确定" onclick="popup.close();"></dd></div>'
31.                         } else if(type == 'confirm') {
32.                                 pop = '<div class="tip"><dt>'+ pop +'</dt><dd><input class="redirect button2" type="button" value="确定" href="'+ url +'"><a href="javascript:;" onclick="popup.close();">取消</a></dd></div>'
33.                         }
34.                         $('body').append('<div id="ntcmsg" style="display:none;">'+ pop +'</div>');
35.                         pop = $('#ntcmsg');
36.                 }
37.                 if(POPMENU[pop.attr('id')]) {
38.                         $('#' + pop.attr('id') + '_popmenu').html(pop.html()).css({'height':pop.height()+'px', 'width':pop.width()+'px'});
39.                 } else {
40.                         pop.parent().append('<div class="dialogbox" id="'+ pop.attr('id') +'_popmenu" style="height:'+ pop.height() +'px;width:'+ pop.width() +'px;">'+ pop.html() +'</div>');
41.                 }
42.                 var popupobj = $('#' + pop.attr('id') + '_popmenu');
43.                 var left = (window.innerWidth - popupobj.width()) / 2;
44.                 var top = (document.documentElement.clientHeight - popupobj.height()) / 2;
45.                 popupobj.css({'display':'block','position':'fixed','left':left,'top':top,'z-index':120,'opacity':1});
46.                 $('#mask').css({'display':'block','width':'100%','height':'100%','position':'fixed','top':'0','left':'0','background':'black','opacity':'0.2','z-index':'100'});
47.                 POPMENU[pop.attr('id')] = pop;
48.         },
49.         close : function() {
50.                 $('#mask').css('display', 'none');
51.                 $.each(POPMENU, function(index, obj) {
52.                         $('#' + index + '_popmenu').css('display','none');
53.                 });
54.         }
55. };

复制代码

第 663-700 行：

1. var DISMENU = new Object;
2. var display = {
3.         init : function() {
4.                 var $this = this;
5.                 $('.display').each(function(index, obj) {
6.                         obj = $(obj);
7.                         var dis = $(obj.attr('href'));
8.                         if(dis && dis.attr('display')) {
9.                                 dis.css({'display':'none'});
10.                                 dis.css({'z-index':'102'});
11.                                 DISMENU[dis.attr('id')] = dis;
12.                                 obj.on('click', function(e) {
13.                                         if(in_array(e.target.tagName, ['A', 'IMG', 'INPUT'])) return;
14.                                         $this.maskinit();
15.                                         if(dis.attr('display') == 'true') {
16.                                                 dis.css('display', 'block');
17.                                                 dis.attr('display', 'false');
18.                                                 $('#mask').css({'display':'block','width':'100%','height':'100%','position':'fixed','top':'0','left':'0','background':'transparent','z-index':'100'});
19.                                         }
20.                                         return false;
21.                                 });
22.                         }
23.                 });
24.         },
25.         maskinit : function() {
26.                 var $this = this;
27.                 $('#mask').off().on('touchstart', function() {
28.                         $this.hide();
29.                 });
30.         },
31.         hide : function() {
32.                 $('#mask').css('display', 'none');
33.                 $.each(DISMENU, function(index, obj) {
34.                         obj.css('display', 'none');
35.                         obj.attr('display', 'true');
36.                 });
37.         }
38. };

复制代码

kuing

但是在改之前，还是应该先理解这块到底起了什么作用，不然就无法预知改后会出现什么副作用了（我平时也不用手机版，所以很难知道）

还有为什么只挡住了 details ，而像 tikz 或 asy 那些点击看代码的又不会影响呢？

kuing

另外无意中发现，手机版的 verhash 在后台更新缓存后就会变，太好了，不像电脑版那样永远不变（除非手工改数据库）

hbghlyj

致各位论坛网友：

由于 hbghlyj 操作数据库失误导致由 2023-9-26 至 2023-11-5 间期的所有帖子的内文都被清空，在此给大家真诚道歉。

现在我们正在浏览这期间的帖子，努力回忆内容，尽可能地多恢复一些，如果您还记得本帖原本的内容，也希望您能编辑回来，麻烦各位了。