Question

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

所以，我想在点击“社交”之后得到同样的信息：

FACEBOOK TWITTER EMAIL SOCIAL

提前感谢您的帮助！

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

6 个答案: