javascript - jQuery圆形菜单导航在切换关闭后创建一个小圆圈

当我单击主圆时，周围的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/

最佳答案

您确实需要删除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/