简单易用Javascript Hide and Show

lxchen2001

Javascript 就这么几行：

& i9 Z5 y1 X1 ]& L$ w* ^function toggle() {
' v: L! U# a( D1 Q0 Y8 P if (document.getElementById("showhide").className=="show"){
  document.getElementById("showhide").className="hide";
  }
else{
  document.getElementById("showhide").className="show";
. J2 i  a1 V" g- N }
}
2 z% `* j# C9 S
4 ^8 v; {7 A) I! _- w. {  m) ucss 里面加上hide 、 show，缺省定义是hide. （反过来也行，自己修改一下就好了）
) k, }4 |9 F" A  Z% a$ g
HTML / MDX源文件中 任何元素都能使用。
) o/ G. z3 K1 c" D. u: f6 x6 U. n
+ N$ b# w$ n( S' s3 b
倒是有个问题也顺便请教一下：

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

dolanskurd

Great job!

jiangws

好办法，谢谢分享。

lxchen2001

jiangws 发表于 2016-9-24 22:48
1 U; I$ Q7 b0 P/ Z  @好办法，谢谢分享。

$ Z5 y; d  o- o
后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。
1 ^1 e# W4 F# s. w1 C: b# j% E. _3 n
也发现另外的问题，比如一个页面中有多个ID, 这个就不太适用。
* a! z7 b( S( M$ z+ J0 b
$ `. k$ C  w* q! ]& C/ s! j在学习实践中，学到了新写法，这个可以在MDICT中正常运行，代码同样的简洁。

  [6 o. k; `2 y) U* c（点击Full Hyponyms测试）

idict

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

4 M! B: H, Q5 f$ Y. K在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
都是大神们的大作, 抱歉忘记了名字了. 在下遵循不知道名字的开源协定, 上载测试文件.
' E4 {6 a' n" ]% T5 C
如果使用previousSibling/nextSibling等, 可能会有大的机能开支吧. 如果i7应该是没有所谓...

如果css/js, 在文本中需要显示隐藏的内容加上标签, 应该是很快的. 不过会增加文本大小. 也只是愚见, 不作参考.
9 L! p; v9 `& Y6 O" J4 g
) v: M' H) Z4 t+ N这个只适应用MDict_PC 1.3 RC4, 其他的就不知道了.

大致如下:
; r! G' x5 {# C& V: v' l. @5 Ijs
1 N6 z9 k  }5 P

1. function transChs_test(ele) {
   
2.         if (ele.className == 'js_active') {
   
3.                 ele.className = '';
   % t8 m% J$ l1 S: q; ^' F8 T$ M
4.                 document.getElementById('test').className = '';
   
5.         } else {
   
6.                 document.getElementById('test').className = 'js_chs';
   - s! q* x* H$ Q: D, D# m& O" u
7.                 ele.className = 'js_active'
   
8.         }
   
9. }

复制代码

9 m. \7 {8 b% t& W0 k/ A3 O
css部分
6 G* ^% x6 ~. ~4 ~1 f

1. /* default: chinese */
   ' K, y3 F) @& g6 B
2. 
   ! k( E4 {! o0 J% j+ h
3. .cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}
   
4. .cn_btn:hover{color:MidnightBlue;background-color:Pink;}
   7 l5 @$ F% P( g( L
5. .js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}
   
6. .js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
   
7. 
   & p7 f1 u# J# D7 m* P; I
8. .js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}
   # x: d! h! x% k
9. 
   : S! Q. L2 W3 o, C
10. 
    / T$ _6 d/ X0 ^; f3 R4 B3 L) d
11. /* default: no chinese */
    4 U: O$ u: P# O
12. /*
    
13. .cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}
    3 Q1 _+ _% n) V2 i1 z. J6 s; D
14. .cn_btn:hover{color:MidnightBlue;background-color:Pink;}
    " H- E: s  s+ s* Q) H* X
15. .js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}
    
16. .js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
    ! X  h$ k0 ^+ `# b$ P
17. 
    
18. .js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}
    . }4 E) A2 m& M7 m! h) r1 m* q5 |
19. .L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}
    2 u) }/ [" T+ ?9 [
20. */

复制代码

9 L: O8 c- W3 }3 q, @2 W9 t文本词条头部加个总ID: test, 其余需要显示或隐藏的, 加对应标签, 如上述的中文标签. 加个按键标签, 就可以显示隐藏中文了. 不知道是否理解了楼主的所说的.
+ G7 p# Q6 z% `- B! `" m: X1 k

1. <link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>
   9 N: C# Q7 j' L1 i; x8 r
2. <div class="test" id="test">
   " ~" X/ V* O1 g- s
3.    <span class="L_ENT">
   ) V5 B& c# n: L6 O4 [
4.     test
   
5.    </span>
   8 O( j3 N, O, N( O' S9 G
6.    <a name="L_topv">
   
7.    </a>
   
8.    <div class="L_MRK">
   & u! a8 G4 \9 \9 d( h
9.     <span class="cn_js" onclick="transChs_test(this)">
   3 @" B: X# T, B5 x
10.      <span class="cn_btn" title="Chinese on/off">
    % H5 Y1 l& k0 x7 E, g: k9 v
11.       Chs
    
12.      </span>
    
13.     </span>
    # M5 C  k$ l" H! I) A1 k
14. ...
    
15. ...
    
16. ...

复制代码

lxchen2001

idict 发表于 2016-9-25 12:50
( `/ \9 c! C/ H0 B4 w# S- ?3 K1 Y7 |在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
$ @5 }3 p- V, D, t  ]都是大神们的大作, 抱歉忘记 ...

8 ?8 c2 a/ t) R5 w  x谢谢分享心得。
" b9 }0 s+ o$ L6 S+ ?( A3 L" X7 q7 _8 q
: H$ u2 M  C9 _2 B7 N点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

（复制代码部分复制出来并入了很多乱码，不知能否单独提供一下？）
# ]: f! I5 D+ W  ^
; w1 c1 i- _& U" M% u谢谢

idict

lxchen2001 发表于 2016-9-25 16:47
谢谢分享心得。
+ U: Q! Q# U! D+ b# q
; Z2 z; k& w8 }- \# b6 Z点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...
' G* W0 b" V9 Q" Z
6 m2 Q5 g" B' W只得重做, 之前的删除了.

' @0 N* i) r7 `见附件如下, 不作参考.
7 S. Q4 w+ S+ F* W" y

eeshu

idict 发表于 2016-9-25 12:50
在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
0 l/ m7 u8 _% ?" P# A' ?0 Y都是大神们的大作, 抱歉忘记 ...

. F3 P% n0 H8 Z7 F1 b' p颜值很高

fnaviwwo1

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

lxchen2001

fnaviwwo1 发表于 2016-9-29 20:23
( m$ E' j  U+ p6 Y0 o$ M我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

) Y6 p" [3 l; E4 ^都可行

9 C+ h0 C% I: f6 d5 Y7 \6 p' z用class的话 可以用css来控制，而且不光是隐藏显示，包括其他的css设定

jiangws

idict 发表于 2016-9-26 13:56
居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...
, V  j: G: x8 x
只得重做, 之前的删除了.

# h$ N: v5 k' T* x- D7 P' [2 X很好的想法，谢谢！

jiangws

lxchen2001 发表于 2016-9-25 02:32
- G5 z/ {6 m# F! `1 M) O后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。

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

! U& c/ G/ g; Q1 ?( Y1 z使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

lxchen2001

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

嗯 是的
3 c% {" V; R% N- \# V# H
看别人的标签 有时觉得比较累 所以倾向按照自己的想法去完成