求教:html 隐藏和显示多行中文或英文

求教:html 隐藏和显示多行中文或英文,第1张

就是通过class的统一控制。引用jq的hide和show方法即可。代码如下:

<div class="english">

    This is a line in English

</div>

<div class="chinese">

    这是一行中文

</div>

<div class="english">

    This is line 2

</div>

<div class="chinese">

    这是第二行

</div>

<div class="english">

    This is line 3

</div>

<div class="chinese">

    这是第三行

</div>

<button data-type="1">显示中文</button>

<button data-type="2">隐藏中文</button>

<button data-type="3">显示英文</button>

<button data-type="4">隐藏英文</button>

<script>

  var eleChinese = $('.chinese')

  var eleEnglish = $('.english')

  var btn = $('button')

  btn.click(function () {

    var type = parseInt($(this).attr('data-type'))

    switch (type) {

      case 1:

        eleChinese.show()

        break

      case 2:

        eleChinese.hide()

        break

      case 3:

        eleEnglish.show()

        break

      case 4:

        eleEnglish.hide()

        break

    }

  })

</script>

 /*一行表示**/

     overflow: hidden

white-space: nowrap

text-overflow: ellipsis

/***2行表示**/

display: -webkit-box

overflow: hidden

text-overflow: ellipsis

word-wrap: break-word

white-space: normal !important

-webkit-line-clamp: 2

-webkit-box-orient: vertical

将需要隐藏的元素添加同样的class名abc

然后再在社区俱乐部那个radio上面添加事件 hideabc()

最后写好方法 hideabc()

就好了


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/zaji/5916704.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-08
下一篇 2023-03-08

发表评论

登录后才能评论

评论列表(0条)

保存