Wie kann ich ein generiertes Element neben dem ursprünglichen Button/Link positionieren?

Ich möchte die drei sozialen Elemente zeigen, die durch den "sozialen" Link auf der linken Seite desselben "sozialen" Links erzeugt werden, nachdem ich darauf geklickt habe.Wie kann ich ein generiertes Element neben dem ursprünglichen Button/Link positionieren?

So würde Ich mag diese in der gleichen Linie erhalten wie nach dem Einschalten „sozialen“ klicken:

YouTube Email SOCIAL

Ihnen für Ihre Hilfe Vielen Dank im Voraus!

$(document).ready(function() { 
 
    $(".icon-social-1", this).on("click", function (e) { 
 
     e.preventDefault(); 
 
     $(this).siblings(".subicons").toggle(); 
 
    }); 
 
});

a.trigger { 
 
    color:#000; 
 
    cursor:pointer; 
 
    display:block; 
 
    margin-bottom:10px; 
 
    text-decoration:none; 
 
} 
 
.subicons 
 
{ 
 
    display:none; 
 
} 
 

 
li.list{ 
 
display:inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><strong>Show/hide on click:</strong></p> 
 
<div class="socials click"> 
 
    <ul> 
 
     <li> 
 
      <a href="" class="icon icon-social icon-social-1"><i>Social</i></a> 
 
      <ul class="subicons"> 
 
       <li class="list"><a href="" target="_blank" class="">Facebook</a></li> 
 
       <li class="list"><a href="" target="_blank" class="">Twitter</a></li> 
 
       <li class="list"><a href="" target="_blank" class="">e-mail</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>

Quelle

2017-10-31 johnwhitson

so was ist das Problem? Stil, wie Sie wollen – dfsq

Scheint hier zu arbeiten. Wir verstehen das Problem nicht. Ändern Sie einfach die Position der Elemente, wenn das Problem darin besteht, dass sie sich rechts statt links von der sozialen Verbindung befinden. – Shilly

Ich weiß nicht, wie man sie links von "sozial" positioniert.Ich würde gerne bekommen: FACEBOOK TWITTER E-MAIL SOCIAL in der gleichen Zeile – johnwhitson

.subicons { 
    display: none; 
    padding-left: 0; 
}

Ich glaube, er will die Polsterung von ul-Tag beseitigen. UL-Tags haben standardmäßig eine Füllung.

Quelle

2017-10-31 09:44:47 Kushtrim

Hallo Kushtrim, danke für Ihre Hilfe :) Ich habe versucht, meine Frage zu aktualisieren, weil ich nichts gegen die Polsterung – johnwhitson

Verwendung " toggleClass() "anstelle von" toggle() ". Und deine Klasse sollte .yourClass {display: inline-block;} – Kushtrim

Vielen Dank !!! – johnwhitson

.subicons { 
    padding-left: 0; 
}

Der obige Code löst Ihr Problem.

Quelle

2017-10-31 09:50:11

Bewegen Sie einfach die Unterliste vor dem Hyperlink, so dass sie bereits in der richtigen Reihenfolge sind, und setzen Sie dann display: inline-block auf die Subicons-Liste.

.subicons { 
    display: inline-block; 
} 

<li> 
    <ul class="subicons"> 
     <li class="list"><a href="" target="_blank" class="">Facebook</a></li> 
     <li class="list"><a href="" target="_blank" class="">Twitter</a></li> 
     <li class="list"><a href="" target="_blank" class="">e-mail</a></li> 
    </ul> 
    <a href="" class="icon icon-social icon-social-1"><i>Social</i></a> 
</li>

Quelle

2017-10-31 09:50:56 Shilly

Habe ich das Richtige getan? https://jsfiddle.net/5cbegbet/ – johnwhitson

Fast. Sieh dir auch Ryan 's Antwort an. Das Problem ist, dass '.toggle()' zwischen display none und inline statt display none blendet und inline-block anzeigt. Also müssen Sie nur die Onlick-Funktion ändern. – Shilly

jQuery toggle() Funktion Show-Element mit der CSS display: block Eigenschaft, die nicht erreichen, was Sie wollen. Verwenden Sie stattdessen die Funktion css() oder toggleClass().

JavaScript:

$(this).siblings(".subicons").toggleClass('hide');

CSS:

.subicons{ 
    display:inline; 
    padding-left:0; 
} 
.subicons.hide { 
    display:none; 
}

$(document).ready(function() { 
 
    $(".icon-social-1", this).on("click", function (e) { 
 
     e.preventDefault(); 
 
     $(this).siblings(".subicons").toggleClass('hide'); 
 
    }); 
 
});

a.trigger { 
 
    color:#000; 
 
    cursor:pointer; 
 
    display:block; 
 
    margin-bottom:10px; 
 
    text-decoration:none; 
 
} 
 
.subicons 
 
{ 
 
    display:inline; 
 
    padding-left:0; 
 
} 
 
.subicons.hide 
 
{ 
 
    display:none; 
 
} 
 

 
li.list{ 
 
display:inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><strong>Show/hide on click:</strong></p> 
 
<div class="socials click"> 
 
    <ul> 
 
     <li> 
 
      <ul class="subicons hide"> 
 
       <li class="list"><a href="" target="_blank" class="">Facebook</a></li> 
 
       <li class="list"><a href="" target="_blank" class="">Twitter</a></li> 
 
       <li class="list"><a href="" target="_blank" class="">e-mail</a></li> 
 
      </ul> 
 
      <a href="" class="icon icon-social icon-social-1"><i>Social</i></a> 
 
     </li> 
 
    </ul> 
 
</div>

Quelle

2017-10-31 09:57:57

Vielen Dank Ryan! – johnwhitson

Try this:

$(document).ready(function() { 
 

 
    $(".icon-social-1", this).on("click", function (e) { 
 
     e.preventDefault(); 
 
     $(this).siblings(".subicons").toggle(); 
 
    }); 
 
});

a.trigger { 
 
    color:#000; 
 
    cursor:pointer; 
 
    display:block; 
 
    margin-bottom:10px; 
 
    text-decoration:none; 
 
} 
 
.subicons 
 
{ 
 
    display:inline-block; 
 
    
 
} 
 

 
li.list{ 
 
display:inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><strong>Show/hide on click:</strong></p> 
 
<div class="socials click"> 
 
    
 
      <a href="" class="icon icon-social icon-social-1"><i>Social:</i></a> 
 
      <div class="subicons" style="display:none"> 
 
       
 
       <a href="" target="_blank" class="">Facebook</a> 
 
       <a href="" target="_blank" class="">Twitter</a> 
 
       <a href="" target="_blank" class="">e-mail</a> 
 
      </div> 
 
     
 
</div>

Quelle

2017-10-31 10:10:56

Wenn Sie nicht wollen, um die Reihenfolge der html zu ändern und wollen, dass die „soziale“ Link in einem Ort bleiben Sie absolute Positionierung für die sozialen Verbindungen nutzen können. Stellen Sie sicher, dass ein Elternteil positioniert ist. In diesem Fall habe ich .socials gewählt. Auch tat a.trigger nichts.

$(document).ready(function() { 
 
    $(".icon-social-1", this).on("click", function(e) { 
 
    e.preventDefault(); 
 
    $(this).siblings(".subicons").toggle(); 
 
    }); 
 
});

a.icon { 
 
    color: #000; 
 
    cursor: pointer; 
 
    display: block; 
 
    margin-bottom: 10px; 
 
    text-decoration: none; 
 
    padding-left: 170px; 
 
} 
 

 
.socials { 
 
    position: relative; 
 
} 
 

 
ul.subicons { 
 
    display: none; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 

 
li.list { 
 
    display: inline; 
 
} 
 

 
li { 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><strong>Show/hide on click:</strong></p> 
 
<div class="socials click"> 
 
    <ul> 
 
    <li> 
 
     <a href="" class="icon icon-social icon-social-1"><i>Social</i></a> 
 
     <ul class="subicons"> 
 
     <li class="list"><a href="" target="_blank" class="">Facebook</a></li> 
 
     <li class="list"><a href="" target="_blank" class="">Twitter</a></li> 
 
     <li class="list"><a href="" target="_blank" class="">e-mail</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Quelle

2017-10-31 10:29:24 yezzz

Wie kann ich ein generiertes Element neben dem ursprünglichen Button/Link positionieren?

Antwort

Verwandte Themen