材料设计和Jquery

Material Design and Jquery

本文关键字：Jquery 材料      更新时间：2023-09-26

http://codepen.io/alcoven/pen/XJeEQy

我试图让这些圆圈中的每一个都激活自己，而不需要在点击时更改其余的圆圈。当点击$（"按钮"）时，我正在使用$（this）（"button"）和$this.children（"club"）。现在，这些不仅不起作用，而且从中心开始的物质循环增长也不起作用。在内容中滑动的点击功能脚本上方的脚本应该创建一个慢慢填充bg并逐渐消失的跨度。

HTML

<button class="blup active">Define<div class="button-text">This is test copy this is test copy this its test copy this is test copy this is test copy.This is test copy this is test copy this its test copy this is test copy this is test copy.</div></button>
<button class="blup active">Describe</button>
<button class="blup active">Discover</button>
<button class="blup active">Design</button>
<button class="blup active">Develop</button>
<button class="blup active">Deliver</button>

JS-

var addRippleEffect = function (e) {
    var target = e.target;
    if (target.tagName.toLowerCase() !== 'button') return false;
    var rect = target.getBoundingClientRect();
    var ripple = target.querySelector('.ripple');
    if (!ripple) {
        ripple = document.createElement('span');
        ripple.className = 'ripple';
        ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
        target.appendChild(ripple);
    }
    ripple.classList.remove('show');
    var top = e.pageY - rect.top - ripple.offsetHeight / 4 - document.body.scrollTop;
    var left = e.pageX - rect.left - ripple.offsetWidth / 4 - document.body.scrollLeft;
    ripple.style.top = top + 'px';
    ripple.style.left = left + 'px';
    ripple.classList.add('show');
    ripple.classList.add('grow');
    return false;
}
document.addEventListener('click', addRippleEffect, false);
function morph(){
  var morphSniff = $('button').css('border-radius'); 
  if(morphSniff == "100%"){
    $('button').css('border-radius':'0%');
    $('.button-text').slideToggle();
  }
  else{
    $('button').css('border-radius':'100%');
    $('.button-text').slideToggle();
  }
};
$('button').click(function(){
    morph();
    return false; 
  });

尝试通过提供this上下文来更改仅单击的圆圈：

function morph() {
    var morphSniff = $(this).css('border-radius');
    if (morphSniff == "100%") {
        $(this).css('border-radius': '0%');
        $('.button-text').slideToggle();
    } else {
        $(this).css('border-radius': '100%');
        $('.button-text').slideToggle();
    }
};
$('button').click(morph);

演示：http://codepen.io/anon/pen/myBLwm

相关文章：