如何将生成的元素放置在原始按钮/链接旁边？答案

【问题标题】：How can I position a generated element beside the original button/link?如何将生成的元素放置在原始按钮/链接旁边？
【发布时间】：2026-01-13 12:55:02
【问题描述】：

我想在点击后在同一个“社交”链接的左侧显示“社交”链接生成的三个社交元素。

所以，我想在点击“社交”之后在同一行中获得这个：

脸书推特电子邮件社交

提前感谢您的帮助！

$(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>

【问题讨论】：

那么问题出在哪里？随心所欲地设计风格
似乎在这里工作。我们不明白这个问题。如果问题是元素在社交链接的右侧而不是左侧，只需更改元素的位置即可。
我不知道如何将它们放在“社交”的左侧。我想得到这个：FACEBOOK TWITTER EMAIL SOCIAL 在同一行

标签： javascript jquery html css menu

【解决方案1】：

jQuery 的 toggle() 函数显示带有 CSS display: block 属性的元素，这不会达到你想要的效果。请改用css() 函数或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>

【讨论】：

【解决方案2】：

试试这个：

$(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>

【讨论】：

【解决方案3】：

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

我认为他想删除由 ul 标签引起的填充。 UL 标签默认有填充。

【讨论】：

嗨 Kushtrim，感谢您的帮助 :) 我已经尝试更新我的问题，因为我不介意填充
使用“toggleClass()”而不是“toggle()”。你的班级应该有 .yourClass{ display: inline-block;}

【解决方案4】：

.subicons {
    padding-left: 0;
}

以上代码将解决您的问题。

【讨论】：

【解决方案5】：

只需将子列表移到超链接之前，使其顺序正确，然后在子图标列表上设置display: inline-block。

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

【讨论】：

差不多。看看瑞安的回答也是如此。问题是.toggle() 在显示无和显示内联之间切换，而不是显示无和显示内联块。所以你只需要改变 onlick 功能。

【解决方案6】：

如果您不想更改 html 的顺序并希望“社交”链接保留在一个位置，您可以对社交链接使用绝对定位。确保有一个已定位的父级，在本例中我选择了.socials。另外，a.trigger 什么也没做。

$(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>

【讨论】：