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

Question

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

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

FACEBOOK TWITTER 电子邮件社交

预先感谢您的帮助!

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

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