jQuery 实现两种相似的下拉菜单的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery 实现两种相似的下拉菜单的问题

function toggleMenu($ele, $menu, className) {
  if ($ele.hasClass(className)) {
    $menu.slideUp();
    $ele.removeClass(className);
  } else {
    $ele.addClass(className);
    $menu.slideDown();
  }
}
// another style of toggle menu
function toggleMenu2($ele, $menu, className) {
  if ($ele.hasClass(className)) {
    $menu.fadeOut();
    $ele.removeClass(className);
  } else {
    $ele.addClass(className);
    $menu.fadeIn();
  }
}

如上代码,点击按钮,展开隐藏菜单,但是一个是上下滑动,一个是fadeIn/out的效果,相似代码非常多,但是在一个页面中都要用到,有没有什么方法可以精简代码?望赐教。

展开
收起
小旋风柴进 2016-05-31 13:03:13 1897 0
1 条回答
写回答
取消 提交回答
  • 小旋风柴进
    function toggleMenu(type, $ele, $menu, className) {
    
    $ele.hasClass.toggleClass(className);
    var flag = $ele.hasClass(className);
    var show = (type == "fade") ? $menu.fadeOut : $menu.slideUp;
    var hide = (type == "fade") ? $menu.fadeIn : $menu.slideDown;
    flag ? show() :  hide();
    2019-07-17 19:21:48
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载