Question

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

我试图让这些圈子中的每个圈子自动激活，而不会在点击时更改其余圈子。当点击$（＆＃39;按钮＆＃39;）时，我正在使用$（this）（＆＃39;按钮＆＃39;）和$ this.children（＆＃39; blub＆＃39;）现在不仅仅是这些不起作用，但中心的物质圈增长也不起作用。在内容中滑动的单击函数脚本上方的脚本应该创建一个缓慢填充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; 
  });

Answer 1

尝试通过提供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

材料设计和Jquery

1 个答案: