简单易用Javascript Hide and Show

lxchen2001

Javascript 就这么几行：

, i( W2 H  l' [1 efunction toggle() {
2 G6 y4 Y5 Q& K+ N& p if (document.getElementById("showhide").className=="show"){
, e+ @8 z( e4 `: {; x* j  document.getElementById("showhide").className="hide";
  }
else{
  document.getElementById("showhide").className="show";
}
}
& T: q1 G/ }0 `  u* x5 {
css 里面加上hide 、 show，缺省定义是hide. （反过来也行，自己修改一下就好了）

HTML / MDX源文件中 任何元素都能使用。


! Y: u5 o/ o6 e8 J4 M2 M; H* g6 ]倒是有个问题也顺便请教一下：
5 ]9 j' R/ l% I, P" H+ i
我想显示隐藏中的前10个元素、20个、50个、100个或者全部（如附件中的<a>），这样的JS要怎么写？

dolanskurd

Great job!

jiangws

好办法，谢谢分享。

lxchen2001

' S/ g  Y3 g' {2 D

jiangws 发表于 2016-9-24 22:48
好办法，谢谢分享。

; V" F! D' L4 J; Z
9 J8 o  h4 j0 ~后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。

也发现另外的问题，比如一个页面中有多个ID, 这个就不太适用。
. z( j4 m7 c5 c
" \0 i3 i) d' i3 ]# T3 r5 T& J在学习实践中，学到了新写法，这个可以在MDICT中正常运行，代码同样的简洁。

（点击Full Hyponyms测试）

idict

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

1 U8 y4 k+ A6 z7 d. w' l
在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
都是大神们的大作, 抱歉忘记了名字了. 在下遵循不知道名字的开源协定, 上载测试文件.

如果使用previousSibling/nextSibling等, 可能会有大的机能开支吧. 如果i7应该是没有所谓...
% D: M) |# F5 h+ b) A3 f: x
如果css/js, 在文本中需要显示隐藏的内容加上标签, 应该是很快的. 不过会增加文本大小. 也只是愚见, 不作参考.
" l: F- i. I$ C
这个只适应用MDict_PC 1.3 RC4, 其他的就不知道了.

# B  v9 d# K  t' ^3 T大致如下:
# ~* W0 u  I' n2 M/ w; ajs

1. function transChs_test(ele) {
   
2.         if (ele.className == 'js_active') {
   % G* k4 h; D5 o) {3 A6 [
3.                 ele.className = '';
   
4.                 document.getElementById('test').className = '';
   
5.         } else {
   
6.                 document.getElementById('test').className = 'js_chs';
   
7.                 ele.className = 'js_active'
   
8.         }
   ; }( g, Q  y0 E
9. }

复制代码

9 j- c+ F8 z, p1 y2 d9 q6 Y1 Lcss部分
' [  o) Z+ I/ w( r8 f) S+ I

1. /* default: chinese */
   
2. 
   
3. .cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}
   8 [- X% W' f$ {$ d9 p2 K7 P
4. .cn_btn:hover{color:MidnightBlue;background-color:Pink;}
   
5. .js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}
   
6. .js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
   
7. 
   
8. .js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}
   8 m) I, Q6 ]* u0 s, Y, p. C
9. 
   ( c1 h& u  M8 o
10. 
    9 D: g6 C; e" z4 t7 I/ Q5 o
11. /* default: no chinese */
    8 h0 G4 R2 ?. D% U
12. /*
    9 c, F+ V3 r( Y1 B0 u
13. .cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}
    
14. .cn_btn:hover{color:MidnightBlue;background-color:Pink;}
    , O- A  F0 F" d8 A9 _
15. .js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}
    ! F1 |4 L+ {8 A/ x9 z3 F+ z
16. .js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
    2 J1 {( I6 a9 ~
17. 
    8 ^/ d& W5 M. L& N2 l
18. .js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}
    ! L  L6 F, S& p& q9 ]& q5 K% C
19. .L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}
      y" |( G' b0 ]  ]+ b% I  w, M4 F1 W3 G
20. */

复制代码

" b0 b' B) |+ m4 R7 B% t

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

1. <link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>
   
2. <div class="test" id="test">
     `6 C3 v0 c% a  u' [
3.    <span class="L_ENT">
   
4.     test
   
5.    </span>
   1 i2 z2 @# s& V& [! E0 K9 p
6.    <a name="L_topv">
   ; O3 ~: j* s3 j' q0 j  Q3 M
7.    </a>
   
8.    <div class="L_MRK">
   
9.     <span class="cn_js" onclick="transChs_test(this)">
   
10.      <span class="cn_btn" title="Chinese on/off">
    , F$ Y5 Z! g4 g4 j% _% m+ O/ C
11.       Chs
    
12.      </span>
    
13.     </span>
    
14. ...
    
15. ...
    & {4 Z+ Z8 |5 y) R
16. ...

复制代码

7 ^# |$ [1 M0 m, |

lxchen2001

idict 发表于 2016-9-25 12:50
6 ]9 e# }% ]9 q$ R6 j+ z* K" i在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
都是大神们的大作, 抱歉忘记 ...

谢谢分享心得。
% q# x5 ]) c! n7 K" a' y2 P
5 T4 W2 n( S/ c点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

4 g' D$ m: w* v（复制代码部分复制出来并入了很多乱码，不知能否单独提供一下？）

谢谢

idict

lxchen2001 发表于 2016-9-25 16:47
0 ~. L9 J, o- o4 p  n' D2 [谢谢分享心得。

点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...

, x% R8 N% z: x' P, Z9 @只得重做, 之前的删除了.

- @7 u% ?1 \# x0 k, {& `( k见附件如下, 不作参考.

eeshu

idict 发表于 2016-9-25 12:50
4 o( J" M4 W1 x5 c$ ?. [在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
+ G8 b3 o# `$ {5 ]都是大神们的大作, 抱歉忘记 ...

颜值很高

fnaviwwo1

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

lxchen2001

fnaviwwo1 发表于 2016-9-29 20:23
2 }7 c" R  U1 ~& G% E+ {6 D我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

都可行

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

jiangws

idict 发表于 2016-9-26 13:56
$ Z- I6 E) e' k2 r居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...
) J. }% ]0 b$ r& w
只得重做, 之前的删除了.

2 C0 s0 Y0 w& n! t4 }8 L很好的想法，谢谢！

jiangws

lxchen2001 发表于 2016-9-25 02:32
后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。
2 I5 W* D5 A& Y# I( Z) S3 m3 r9 i% S
也发现另外的问题，比如一个页面中有多 ...

使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

lxchen2001

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

& ]# E2 T, G4 H嗯 是的
! O8 r1 d9 O( z# ~7 t1 N
( M7 p0 N# g3 ?$ P. N看别人的标签 有时觉得比较累 所以倾向按照自己的想法去完成