javascript点击显示或者隐藏更多的分享图标

啥也不说,先上效果图

未用javascript

qq分享菜单.png

使用javascript后

qq分享菜单拉出.png

代码如下

  function share(){
      var isOpen = false;
      var $shareMore = $('#shareMore');   
      
      var $parent = $shareMore.parent();
  
      var $as = $shareMore.prevAll('a:lt(2)');
      
      var $b = $shareMore.children();
  


      $shareMore.click(function() {
          if(isOpen){
              $parent.css('width', 155);

              $as.hide();
              
              $b.removeClass('backword');

          }else{
              $parent.css('width', 200);

              $as.show();

              $b.addClass('backword');

          }
          
          isOpen = !isOpen;
      });
  }


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,523评论 25 708
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,018评论 3 119
  • 一般都会想到 for循环, 毕竟Objective-C是基于C语言的,自然可以使用for循环。 我们都知道字典和s...
    是夏目啊阅读 1,065评论 0 0
  • 花雨伞 那一年的雨真美每一个雨点砸在地上都笑开了花 那一年的燕子真美矫健的身影在雨中飞得那么欢 那一年的花雨伞真美...
    静听旁白阅读 219评论 5 5
  • 江南疏寒雪, 塞北满孤烟。 梦擒敌将首, 封侯金銮殿。 第一次尝试边塞诗,写得比较直白。
    铁瓮城主阅读 278评论 4 1