アンカータグに表示されている既存の円を同心円にする方法

Question

"+"ボタンの上に小さな円があります。クリックすると円が現れ（点線の点）、データベースのデータが円周上に表示されます。

今、私はこれの外に別の同心円を描きたいと思うし、最初の円と共にボタンをクリックしても表示されるはずです。

function toggleDiv(divId){ 
 
    $("#"+divId).toggle(); 
 
}

 .post-share{ 
 
      display: block; 
 
      width: 74px; 
 
      height: 34px; 
 
      margin: 40px 0px 0px 0px; 
 
      background: #3e599a; 
 
      text-decoration: none; 
 
      width: 110px; 
 
      font: 12px; 
 
      color: #FFFFFF; 
 
      position: relative; 
 
      position:fixed; 
 
      top: 40%; 
 
      left: 50%; 
 
      z-index:99; 
 
      text-align: center; 
 
      vertical-align: middle; 
 
     } 
 
     .post-share span{ 
 
      width: 15px; 
 
      height: 18px; 
 
      padding: 3px; 
 
      display: block; 
 
      position: absolute; 
 
      top: -24px; 
 
      right: 0; 
 
      background-color: #080563; 
 
      color: #FFFFFF; 
 
      font-weight: bold; 
 
      vertical-align: middle; 
 
      font: 10px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
 
      text-align: center; 
 
      text-indent: 0; 
 
    
 
     } 
 
    
 
     .social-buttons-text { 
 
     font-size: 4px; 
 
     color: #FFFFFF; 
 
     float: left; 
 
     margin: 0px; 
 
     padding: 0px; 
 
     text-align: left; 
 
     } 
 
     .sphere{ 
 
     height: 80px; 
 
     width:80px; 
 
     border-radius: 50%; 
 
     } 
 
    
 
     /* for circle */ 
 
    
 
     * { 
 
     padding: 0px; 
 
     margin: 0px; 
 
     transition: 1s; 
 
     } 
 
    
 
     html { 
 
     background-color: hsla(190, 60%, 50%,1); 
 
     overflow: hidden; 
 
     } 
 
    
 
     #wrapper { 
 
     margin: 200px auto; 
 
     height: 200px; 
 
     width: 600px; 
 
     } 
 
     .bubble { 
 
     border-radius: 100%; 
 
     height: 40px; 
 
     width: 40px; 
 
     display: inline-block; 
 
     margin: 0px 15px 0px 15px; 
 
     } 
 
    
 
     .animate { 
 
     animation: scaleWobble 2s infinite alternate ease; 
 
     } 
 
    
 
     #red { 
 
     background-color: hsla(350, 50%, 50%, 1); 
 
     } 
 
    
 
     #yellow { 
 
     background-color: hsla(70, 50%, 50%, 1); 
 
     } 
 
    
 
     #green { 
 
     background-color: hsla(120, 70%, 40%, 1); 
 
     } 
 
    
 
     @keyframes scaleWobble { 
 
     from { 
 
      height: 100px; 
 
      width: 100px; 
 
     } 
 
     to { 
 
      height: 125px; 
 
      width: 125px; 
 
     } 
 
     } 
 
    
 
     /** 
 
     * Position icons into circle (SO) 
 
     * http://stackoverflow.com/q/12813573/1397351 
 
     */ 
 
     .circle-container { 
 
     position: relative; 
 
     width: 24em; 
 
     height: 24em; 
 
     padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/ 
 
     border-radius: 50%; 
 
     margin: 1.75em auto 0; 
 
     } 
 
     .circle-container a { 
 
      position: absolute; 
 
      top: 50%; 
 
      left: 50%; 
 
      width: 4em; 
 
      height: 4em; 
 
      margin: -2em; 
 
     } 
 
     .circle-container img { display: block; width: 100%; } 
 
     .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */ 
 
     .deg15 { transform: rotate(15deg) translate(12em) rotate(-15deg); } 
 
     .deg30 { transform: rotate(30deg) translate(12em) rotate(-30deg); } 
 
     .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); } 
 
     .deg60 { transform: rotate(60deg) translate(12em) rotate(-60deg); } 
 
     .deg75 { transform: rotate(75deg) translate(12em) rotate(-75deg); } 
 
     .deg90 { transform: rotate(90deg) translate(12em) rotate(-90deg); } 
 
     .deg105 { transform: rotate(105deg) translate(12em) rotate(-105deg); } 
 
     .deg120 { transform: rotate(120deg) translate(12em) rotate(-120deg); } 
 
     .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); } 
 
     .deg150 { transform: rotate(150deg) translate(12em) rotate(-150deg); } 
 
     .deg165 { transform: rotate(165deg) translate(12em) rotate(-165deg); } 
 
     .deg180 { transform: translate(-12em); } 
 
     .deg195 { transform: rotate(195deg) translate(12em) rotate(-195deg); } 
 
     .deg210 { transform: rotate(210deg) translate(12em) rotate(-210deg); } 
 
     .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); } 
 
     .deg240 { transform: rotate(240deg) translate(12em) rotate(-240deg); } 
 
     .deg255 { transform: rotate(255deg) translate(12em) rotate(-255deg); } 
 
     .deg270 { transform: rotate(270deg) translate(12em) rotate(-270deg); } 
 
     .deg285 { transform: rotate(285deg) translate(12em) rotate(-285deg); } 
 
     .deg300{ transform: rotate(300deg) translate(12em) rotate(-300deg); } 
 
     /* this is just for showing the angle on hover */ 
 
     .circle-container a:not(.center)::before { 
 
      position: absolute; 
 
      width: 7em; 
 
      color: white; 
 
      opacity: 0; 
 
    } 
 
     .circle-container a:hover:before { opacity: 1; } 
 
    
 
     /* this is for showing the circle on which the images are placed */ 
 
     .circle-container:after { 
 
     position: absolute; 
 
     top: 2.8em; left: 2.8em; 
 
     width: 24em; height: 24em; 
 
     border: dashed 1px deeppink; 
 
     border-radius: 50%; 
 
     opacity: .3; 
 
     pointer-events: none; 
 
     content: ''; 
 
     } 
 
     .circle-container:hover:after{ 
 
      opacity: 1; 
 
     } 
 
    
 
     .circle-container a:not(.center)::after { 
 
      position: absolute; 
 
      left: 50%; 
 
      box-shadow: 0 0 .5em .5em white; 
 
      margin: -2px; 
 
      background: #fffea1; 
 
      content: attr(myattri); 
 
    } 
 
    
 
     .circle-container:hover a:after { opacity: 1; } 
 
     .circle-container a:hover:after { opacity: .3; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="post-share sphere yellow" id="name">erwerew 
 
     <span><a href="javascript:toggleDiv('myContent');">+</a></span> 
 
    </span> 
 
    
 
    <div id="myContent" class='circle-container' style="display:none"> 
 
    </div>

Answer 1

する必要があります、これはあなたが探している答えは100％ではないかもしれないが、あなたがやっているものは何でもそうです、あなたはそれがより複雑になっていてもよいです。

あなたは私はあなたがはるかに少ないコードで何をしたいachevingていると思う。この例を参照してくださいborder-radius:50%;

とのdivを使用して、これらの円を作成することができます。

JsFiddleデモ：https://jsfiddle.net/yfpnbf4z/3/

$("#circleToggle").click(function() { 
 
    $("#circle1").fadeToggle("slow"); 
 
    $("#circle2").fadeToggle("slow"); 
 
    if ($("#circle1").is(":hidden")) { 
 
    $("#circleToggle").html("+"); 
 
    } else { 
 
    $("#circleToggle").html("-"); 
 
    } 
 
});

.container { 
 
    background: #333; 
 
    position: relative; 
 
    height: 500px; 
 
    width: 500px; 
 
} 
 
.button { 
 
    position: absolute; 
 
    left: 230px; 
 
    top: 5px; 
 
    width: 40px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    font-size: 20px; 
 
    background: #fff; 
 
    display: inline-block; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
} 
 
.circle { 
 
    border-radius: 50%; 
 
    border: 1px dashed red; 
 
    display: none; 
 
} 
 
#circle1 { 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 150px; 
 
    height: 200px; 
 
    width: 200px; 
 
    line-height: 200px; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 
#circle2 { 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50px; 
 
    height: 400px; 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="button" id="circleToggle">+</div> 
 
    <div class="circle" id="circle1">Some data</div> 
 
    <div class="circle" id="circle2"></div> 
 
</div>

私は、これはあなたがチームメイトに役立ちます願っています。