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

jQuery circle menu navigation creating tiny circle after toggle close

本文关键字：创建 菜单 circle 导航 jQuery      更新时间：2023-09-26

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

我试过jQuery隐藏，但它隐藏了整个元素，

下面是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/

您确实需要删除.selector.open li input + label中的border和padding，但您可以使用另一个类来打开和关闭。

.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
    ...
}

Fiddle：http://jsfiddle.net/adzFe/2576/

我同意，小圆圈是由错误类的额外填充引起的，我已经将填充移到了选择器.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/

看起来问题出在CSS .selector li input + label规则中。在这个规则中，仍然有一些padding和border宽度，这给了圆一些大小。将这两个值更改为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/

相关文章：