在onClick上显示社交图标的子列表

Question

噩梦......

我有一个社交图标列表，包括三个社交帐户，Twitter，Facebook，Pinterest。

但是，由于我有三个推特账户，我希望当你点击推特图标时，你会看到一个子菜单，其中包含三个用于我其他推特账户的邮件。

    <div class="socials">
        <ul>
            <li id="tweeter">
                <a href=""><i class="icon icon-twitter">Twitter</i>
                    <ul class="subicons">
                        <li><a href="" target="_blank" class="twitter-one">a</a></li>
                        <li><a href="" target="_blank" class="twitter-two">a</a></li>
                        <li><a href="" target="_blank" class="twitter-three">a</a></li>
                    </ul>
                </a>
            </li>
        <li><a href="" target="_blank"><i class="icon icon-linkedin">Facebook</i></a></li>
        <li><a href="" target="_blank"><i class="icon icon-linkedin">Pinterest</i></a></li>
        </ul>
    </div>

CSS来点击上面三个Twitter帐户的列表

.socials ul li ul.subicons {
    position:absolute;  
    top:-55px;
    padding:0;
    margin:0;
    width:152px;
    left:50%;
    margin-left:-57px;
    text-align:center;
}

.socials ul li ul.subicons li {display:block; margin:0 5px; width:40px; height:40px; text-indent:-9999px;}

.socials ul li ul.subicons li a.twitter-one {
    background:red;
    width:40px;
    height:40px;
    display:block;
}

.socials ul li ul.subicons li a.twitter-two {
    background:blue;
    width:40px;
    height:40px;
    display:block;
}

.socials ul li ul.subicons li a.twitter-three {
    background:yellow;
    width:40px;
    height:40px;
    display:block;
}

Answer 1

基于Danko指出的其他线程的答案，你的jQuery必须看起来像这样：

点击显示/隐藏：

选项1：

$('#tweeter').on('click', function(e){
    e.preventDefault();
    $(this).css( "display", $(this).css("display") === "none" ? "block" : "none" );
});

选项2：

$(document).ready(function () {
    $("#tweeter", this).on("click", function(e) {
        e.preventDefault();
        $(this).find(".subicons").toggle();
    });
});

点击显示，隐藏模糊：

$(document).ready(function () {
    $(".icon-twitter-1", this).on("click", function (e) {
        e.preventDefault();
        $(this).siblings(".subicons").toggle();
    });
    $(".icon-twitter-2").on({
        "click": function (e) {
            e.preventDefault();
            $(this).siblings(".subicons").show();
        },
            "blur": function () {
                $(this).siblings(".subicons").animate({"opacity": "1"}, 500, function(){$(this).hide();});
            }
    });
});

说明：

模糊事件处理程序使用动画来延迟hide()命令，以便用户可以在隐藏之前点击任何显示的Twitter链接（这将触发模糊事件）。

演示：

注意：我稍微更改了原来的HTML。

＆＃13;

＆＃13;

$(document).ready(function () {
    $(".icon-twitter-1", this).on("click", function (e) {
        e.preventDefault();
        $(this).siblings(".subicons").toggle();
    });
    $(".icon-twitter-2").on({
        "click": function (e) {
            e.preventDefault();
            $(this).siblings(".subicons").show();
        },
            "blur": function () {
                $(this).siblings(".subicons").animate({"opacity": "1"}, 500, function(){$(this).hide();});
            }
    });
});

＆＃13;

a.trigger {
    color:#000;
    cursor:pointer;
    display:block;
    margin-bottom:10px;
    text-decoration:none;
}
.subicons
/*, div.blur:blur p.twitter */
 {
    display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
    <ul>
        <li>
            <a id="tweeter" href="" class="icon icon-twitter icon-twitter-1"><i>Twitter</i></a>
            <ul class="subicons">
                <li><a href="" target="_blank" class="twitter-one">Twitter 1</a></li>
                <li><a href="" target="_blank" class="twitter-two">Twitter 2</a></li>
                <li><a href="" target="_blank" class="twitter-three">Twittee 3</a></li>
            </ul>
        </li>
    </ul>
</div>
<p style="margin-top:30px"><strong>Show on click, hide on blur:</strong></p>
<div class="socials click">
    <ul>
        <li>
            <a id="tweeter" href="" class="icon icon-twitter icon-twitter-2"><i >Twitter</i></a>
            <ul class="subicons">
                <li><a href="" target="_blank" class="twitter-one">Twitter 1</a></li>
                <li><a href="" target="_blank" class="twitter-two">Twitter 2</a></li>
                <li><a href="" target="_blank" class="twitter-three">Twittee 3</a></li>
            </ul>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;