jQuery 下拉菜單顯示和隱藏

想做的效果是點擊按鈕顯示下拉菜單，再點擊按鈕或者其他地方就隱藏菜單，再次點擊按鈕能顯示菜單，謝謝。
代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .link{
                position: relative;
                padding-left: 50px;
                padding-top: 100px;
            }
            .link button{
                width: 180px;
                height: 30px;
                background: gray;
                border: 1px solid transparent;
                border-radius: 4px;
                text-align: left;
                padding-left: 15px;
                cursor: pointer;
                color: #333;
            }
            .link button:hover{
                background-color: #e6e6e6;
                border-color: #adadad;
            }
            .link button span{
                display: block;
                width:0px;
                height:0px;
                border-top:10px solid #666;
                border-left:5px solid transparent;
                border-right:5px solid transparent;
                float: right;
                margin-top: 4px;
                margin-right: 10px;
            }
            .link ul{
                position: absolute;
                display: none;
                top: 10px;
                left: 50px;
                z-index: 1000;
                float: left;
                min-width: 160px;
                padding: 5px 0;
                margin: 2px 0 0;
                font-size: 14px;
                text-align: left;
                list-style: none;
                background-color: #fff;
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                border: 1px solid #ccc;
                border: 1px solid rgba(0,0,0,.15);
                border-radius: 4px;
                -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
                box-shadow: 0 6px 12px rgba(0,0,0,.175);
            }
            .link ul li{
                line-height: 24px;
            }
            .link ul li>a{
                padding-left: 10px;
                color: #333;
                width: 80%;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div class="link">
            <button type="button">
                友情鏈接
                <span class="down-triangle"></span>
            </button>
            <ul>
                <li><a href="#">友情鏈接</a></li>
                <li><a href="#">友情鏈接</a></li>
                <li><a href="#">友情鏈接</a></li>
            </ul>
        </div>
        <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
        <script>
            $(".link button").click(function(){
                if($(".link ul").css("display")=="none"){
                    $(".link ul").css("display","block");
                }else{
                    $(".link ul").css("display","none");
                }
            });
        </script>
    </body>
</html>

回答

編輯回答

柒槿年

        var i = 0;

        $(".link button").click(function(){
            ++i%2 ? $(".link ul").css("display",'block') : $(".link ul").css("display","none");
        });

2017年12月3日 04:41

編輯回答

掛念你

$(document).click(function() {
    $(".link ul").css("display","none");
})

$(".link button").click(function(evt){
    evt.stopPropagation();
    if($(".link ul").css("display")=="none"){
        $(".link ul").css("display","block");
    }else{
        $(".link ul").css("display","none");
    }
});

2017年3月13日 16:38