隐藏列表内容，直到图标被点击

Question

我不希望列表图标显示在Google图标的顶部，直到点击它为止。

我尝试将display:none添加到每个元素。

＆＃13;

＆＃13;

(function(){
	var ul=$("#navs"),li=$("#navs li"),i=li.length,n=i-1,r=120;
	ul.click(function(){
		$(this).toggleClass('active');
		if($(this).hasClass('active')){
			for(var a=0;a<i;a++){
				li.eq(a).css({
					'transition-delay':""+(50*a)+"ms",
					'-webkit-transition-delay':""+(50*a)+"ms",
					'left':(r*Math.cos(90/n*a*(Math.PI/180))),
					'top':(-r*Math.sin(90/n*a*(Math.PI/180)))
				});
			}
		}else{
			li.removeAttr('style');
		}
	});
})($);

＆＃13;

#navs {
  position: fixed;
  left:10px;
  bottom:10px;
  width: 128px;
  height: 128px;
  line-height: 40px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  cursor: pointer;
  background: url(https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png) no-repeat;
  background-size: 100px 100px;
  z-index: 1007;
}

#navs>li,
#navs:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

#navs>li {
  transition: all .6s;
  -webkit-transition: all .6s;
  -moz-transition: .6s;
}

#navs a {
  width: 60px;
  height: 60px;
  display: inline-block;;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  text-decoration: none;
  color: #fff;
  background-color: rgba(0,0,0, 0.5);
  font-size: 30px;
  line-height: 60px;
}

＆＃13;

<ul id="navs">
      <li><a href="#"><i class="fa fa-home"></i></a></li>
      <li><a href="#about"><i class="fa fa-info"></i></a></li>
      <li><a href="#contact"><i class="fa fa-phone"></i></a></li>

    </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

有些人最初试图隐藏li。检查片段。 但是，您需要调整circles

的大小

(function(){
	var ul=$("#navs"),li=$("#navs li"),i=li.length,n=i-1,r=120;
	ul.click(function(){
        
		$(this).toggleClass('active');
		if($(this).hasClass('active')){
			for(var a=0;a<i;a++){
				li.eq(a).css({
					'transition-delay':""+(50*a)+"ms",
					'-webkit-transition-delay':""+(50*a)+"ms",
					'left':(r*Math.cos(90/n*a*(Math.PI/180))),
					'top':(-r*Math.sin(90/n*a*(Math.PI/180))),
                    'background-color': 'rgba(0,0,0, 0.5)'
				});
			}
		}else{
			li.removeAttr('style');
		}
	});
})($);

#navs {
  position: fixed;
  left:10px;
  bottom:10px;
  width: 128px;
  height: 128px;
  line-height: 40px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  cursor: pointer;
  background: url(https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png) no-repeat;
  background-size: 100px 100px;
  z-index: 1007;
}

#navs>li,
#navs:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

#navs>li {
  transition: all .6s;
  -webkit-transition: all .6s;
  -moz-transition: .6s;
}

#navs a {
  width: 60px;
  height: 60px;
  display: inline-block;;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  text-decoration: none;
  color: #fff;
  /*background color removed from here and given to transition logic of js*/
  font-size: 30px;
  line-height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul id="navs">
      <li><a href="#"><i class="fa fa-home"></i></a></li>
      <li><a href="#about"><i class="fa fa-info"></i></a></li>
      <li><a href="#contact"><i class="fa fa-phone"></i></a></li>

    </ul>

Answer 2

在css中添加不透明度0，在脚本单击功能中添加不透明度

#navs>li{
 opacity: 0;
 ...
}

 li.eq(a).css({
  ... 
  'opacity':1
 })

＆＃13;

＆＃13;

(function(){
	var ul=$("#navs"),li=$("#navs li"),i=li.length,n=i-1,r=120;
	ul.click(function(){
		$(this).toggleClass('active');
		if($(this).hasClass('active')){           
			for(var a=0;a<i;a++){
				li.eq(a).css({
					'transition-delay':""+(50*a)+"ms",
					'-webkit-transition-delay':""+(50*a)+"ms",
					'left':(r*Math.cos(90/n*a*(Math.PI/180))),
					'top':(-r*Math.sin(90/n*a*(Math.PI/180))),
                   'opacity':1
				});
			}
		}else{
			li.removeAttr('style');
		}
	});
})($);

＆＃13;

#navs {
  position: fixed;
  left:10px;
  bottom:10px;
  width: 128px;
  height: 128px;
  line-height: 40px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  cursor: pointer;
  background: url(https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png) no-repeat;
  background-size: 100px 100px;
  z-index: 1007;
}

#navs>li,
#navs:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

#navs>li {
  transition: all .6s;
  -webkit-transition: all .6s;
  -moz-transition: .6s;
  opacity: 0;
}

#navs a {
  width: 60px;
  height: 60px;
  display: inline-block;;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  text-decoration: none;
  color: #fff;
  background-color: rgba(0,0,0, 0.5);
  font-size: 30px;
  line-height: 60px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="navs">
      <li><a href="#"><i class="fa fa-home"></i></a></li>
      <li><a href="#about"><i class="fa fa-info"></i></a></li>
      <li><a href="#contact"><i class="fa fa-phone"></i></a></li>

    </ul>

＆＃13;

＆＃13;

＆＃13;