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

Question

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

因此，我想在同一行中获得此信息，例如单击“社交”之后：

脸书推特电子邮件社交

预先感谢您的帮助！

 $(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()函数show元素具有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> 

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

Answer 3

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

我认为他想删除ul标签引起的填充。 UL标签默认情况下保留填充。

Answer 4

.subicons {
    padding-left: 0;
}

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

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

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