Question

当我点击主圆圈时，周围的5个圆圈将完全最小化（至100％隐藏），但这些并未完全最小化。最小化后，主圆上有一个小圆圈。如何在切换关闭后完全最小化（隐藏）主圆顶部的小圆圈。

我已经尝试过jQuery hide，但它隐藏了整个元素，

下面是jQuery代码，

var nbOptions = 8;
var angleStart = -360;

// jquery rotate animation
function rotate(li,d) {
    $({d:angleStart}).animate({d:d}, {
        step: function(now) {
            $(li)
               .css({ transform: 'rotate('+now+'deg)' })
               .find('label')
                  .css({ transform: 'rotate('+(-now)+'deg)' });
        }, duration: 0
    });
}

// show / hide the options
function toggleOptions(s) {
    $(s).toggleClass('open');
    var li = $(s).find('li');
    var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
    for(var i=0; i<li.length; i++) {
        var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
        $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);

    }
}

$('.selector button').click(function(e) {
    toggleOptions($(this).parent());
});

setTimeout(function() { toggleOptions('.selector'); }, 100);

http://jsfiddle.net/adzFe/2574/

Answer 1

看起来问题出在您的CSS .selector li input + label规则中。此规则中您仍有一些padding和border宽度，这使得圆圈有一些大小。将这2个值更改为0，它们应完全隐藏：

.selector li input + label {
  position: absolute;
  left: 50%;
  bottom: 120%;
  width: 0;
  height: 0;

  margin-left: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;

  overflow: hidden;
  cursor: pointer;

  border:0 solid #999; /* previously 1px */
  padding:0; /* previously 6px */
  background:#eee;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

<强>更新由于需要padding和border，因此您可以调整规则集以在菜单圈具有open类时具有这些值，并在类不存在时将其删除

http://jsfiddle.net/avt0fvk4/

Answer 2

您需要删除border内的padding和.selector.open li input + label，但您可以使用其他课程来打开和关闭。

.open1 {
    padding: 6px;
    border:1px solid #999;
 }

添加此JS：

function toggleOptions(s) {
    $(s).toggleClass('open');
    var li = $(s).find('li');
    li.find("label").toggleClass("open1"); // NEW
    ...
}

小提琴：http://jsfiddle.net/adzFe/2576/

Answer 3

我同意，迷你圈是由错误类的额外填充引起的，我已将填充移动到selector.open。现在它没有显示任何迷你圈。

.selector li input + label {
  position: absolute;
  left: 50%;
  bottom: 120%;
  width: 0;
  height: 0;
  margin-left: 0;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
   background:#eee;
  transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

.selector li input + label img {    
border-radius:50%;
}

.selector.open li input + label {
  width: 90px;
  height: 90px;
  margin-left: -40px;
  padding:6px;
   border:1px solid #999;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); 
}

.selector.open li input + label:hover {    
border:1px solid #fff;
padding:6px;
background:#fff;
}
.mainimage{
width:100%;
height:100%;
border-radius:50%;
}

工作代码

http://jsfiddle.net/adzFe/2577/

jQuery圆形菜单导航切换关闭后创建小圆圈

3 个答案: