简单易用Javascript Hide and Show

lxchen2001

Javascript 就这么几行：
8 o4 Z* j4 j- l2 t) J
function toggle() {
4 w6 F' k4 z! u if (document.getElementById("showhide").className=="show"){
  document.getElementById("showhide").className="hide";
6 L5 c+ [- Z2 o6 x$ Z& {  }
8 Z: w2 x' e" {) ]. Z1 Y& |9 G else{
  document.getElementById("showhide").className="show";
}
}
3 i( R! I* F: u4 j% C
  o/ {/ b# r6 d; u; ycss 里面加上hide 、 show，缺省定义是hide. （反过来也行，自己修改一下就好了）
  P5 J" ^" O' j2 Q4 H
9 q' f: c9 o& L# K8 s: T' MHTML / MDX源文件中 任何元素都能使用。
4 @" D. u: n! V  V

倒是有个问题也顺便请教一下：

我想显示隐藏中的前10个元素、20个、50个、100个或者全部（如附件中的<a>），这样的JS要怎么写？

dolanskurd

Great job!

jiangws

好办法，谢谢分享。

lxchen2001

jiangws 发表于 2016-9-24 22:48
8 `- H8 ]% W% X: |9 b& w好办法，谢谢分享。

后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。
, D+ g, w' g& y; B
4 }8 T: ~; C) c: M也发现另外的问题，比如一个页面中有多个ID, 这个就不太适用。
4 O& M4 m: W7 ]9 w
- @! J. Z/ ]: K) p) z在学习实践中，学到了新写法，这个可以在MDICT中正常运行，代码同样的简洁。
! h$ |7 e0 h3 A, G* K( e# t* i! z
* D2 z9 s  E  H5 z, l3 a# b; Z% v（点击Full Hyponyms测试）

idict

想显示隐藏中的前10个元素、20个、50个、100个或者全部

. N, m! A& c  @/ j* D' v
* r$ J! t. s+ d在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
都是大神们的大作, 抱歉忘记了名字了. 在下遵循不知道名字的开源协定, 上载测试文件.
& q% K2 V8 F& R8 B
如果使用previousSibling/nextSibling等, 可能会有大的机能开支吧. 如果i7应该是没有所谓...

如果css/js, 在文本中需要显示隐藏的内容加上标签, 应该是很快的. 不过会增加文本大小. 也只是愚见, 不作参考.

这个只适应用MDict_PC 1.3 RC4, 其他的就不知道了.
2 g& H2 F7 d* s( Q# z/ Y8 O6 ]$ s  `7 D
大致如下:
2 M; u. \! e; n5 sjs
" z' s) w! M" P' c, S* i2 ]

1. function transChs_test(ele) {
   
2.         if (ele.className == 'js_active') {
   : X/ X- T- Z  h( M$ b
3.                 ele.className = '';
   
4.                 document.getElementById('test').className = '';
   
5.         } else {
   
6.                 document.getElementById('test').className = 'js_chs';
   . U6 M0 K0 g  D$ @: T+ m1 k
7.                 ele.className = 'js_active'
   . i  [) m; u. O5 n0 W) @
8.         }
   
9. }

复制代码

css部分
: H# d* F& G: }

1. /* default: chinese */
   
2. 
   . t. ?- x( W5 P1 M
3. .cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}
   9 R3 [; S' @. i0 x
4. .cn_btn:hover{color:MidnightBlue;background-color:Pink;}
   
5. .js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}
   ; E3 q+ W" L0 ~0 Y! k( G& _( E  L
6. .js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
   3 A/ m3 g5 I6 k) w
7. 
   1 @% p6 H# q& N/ w: y/ ]- `
8. .js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}
   
9. 
   $ ?: ?6 `$ j6 E$ G
10. 
    * `1 V7 E- J6 o6 w/ ^3 X' X
11. /* default: no chinese */
    % A/ k' W6 g) N. C; @! j! j  e+ S
12. /*
    
13. .cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}
    - a5 H" S2 @. D1 p6 e& r" a
14. .cn_btn:hover{color:MidnightBlue;background-color:Pink;}
    
15. .js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}
    
16. .js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
    
17. 
    ' @8 e4 k7 `# f8 [; T) P
18. .js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}
    
19. .L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}
    0 l8 l: i) {6 Q( d9 ~6 {7 I, y
20. */

复制代码

2 d9 ~3 A6 E3 |

文本词条头部加个总ID: test, 其余需要显示或隐藏的, 加对应标签, 如上述的中文标签. 加个按键标签, 就可以显示隐藏中文了. 不知道是否理解了楼主的所说的.

1. <link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>
   4 m- |2 Y6 s# W* R- x' J1 n% I
2. <div class="test" id="test">
   1 G/ o' R; T# h6 h' ~: y' t- m
3.    <span class="L_ENT">
   5 C5 {" O2 e/ b! G  R
4.     test
   
5.    </span>
   0 J) {0 D5 {0 h4 O5 ]. ]
6.    <a name="L_topv">
   
7.    </a>
   / g- A( \3 e0 x. s2 c( ?( c
8.    <div class="L_MRK">
   + A6 ~1 C6 k8 o- _8 L/ e
9.     <span class="cn_js" onclick="transChs_test(this)">
   
10.      <span class="cn_btn" title="Chinese on/off">
    
11.       Chs
    3 T5 K3 ~6 |$ _1 A
12.      </span>
    9 U. E6 C) S+ q) j
13.     </span>
    ; @2 D+ W, l6 }, H& T, d" f
14. ...
    
15. ...
    8 H4 ^  O- e& U2 g
16. ...

复制代码

lxchen2001

idict 发表于 2016-9-25 12:50
在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
都是大神们的大作, 抱歉忘记 ...

谢谢分享心得。

% A- u3 R; c' i* a" @( `, L" i点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。
" \: l5 d% ?0 C; }- ]$ W  w
（复制代码部分复制出来并入了很多乱码，不知能否单独提供一下？）

2 u* b. \. W! J+ {2 u6 C1 O: x+ A谢谢

idict

lxchen2001 发表于 2016-9-25 16:47
4 d# k3 V# c5 ]! u" i/ |: J谢谢分享心得。

, @; f7 M* h( J2 y( g& q点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

4 L9 a  L5 m0 Q2 [居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...
( I- h' s7 K1 X( n0 l( f
' V: x1 o8 q! T" }1 Y3 w只得重做, 之前的删除了.

见附件如下, 不作参考.
; a) h1 J, C2 L$ f) A/ M" x

eeshu

idict 发表于 2016-9-25 12:50
5 N: R# z% I7 N5 r在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
8 d; _# ]& _( \+ L  x都是大神们的大作, 抱歉忘记 ...

6 W+ C8 R9 b9 a" B+ u9 U; s颜值很高

fnaviwwo1

我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

lxchen2001

fnaviwwo1 发表于 2016-9-29 20:23
我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

5 K2 N9 }9 k4 N4 A! I都可行

用class的话 可以用css来控制，而且不光是隐藏显示，包括其他的css设定

jiangws

idict 发表于 2016-9-26 13:56
居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...
9 C* ^- W  u8 p. ?
只得重做, 之前的删除了.

; N6 l$ Z: ^8 N7 b# _很好的想法，谢谢！

jiangws

lxchen2001 发表于 2016-9-25 02:32
后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。

也发现另外的问题，比如一个页面中有多 ...

7 r: G3 Q; {3 [( [! M使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

lxchen2001

jiangws 发表于 2016-10-1 23:06
使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

/ |; W; a/ F0 D. M: h嗯 是的

看别人的标签 有时觉得比较累 所以倾向按照自己的想法去完成