jQuery滑出选项卡

Question

我有一个滑出标签，当前默认情况下显示在我的页面左侧，并在单击按钮时隐藏，然后滑出，当您单击它时再次可见。如何将页签设置为默认隐藏？下面是我的代码：

HTML：

<aside id="share-wrapper">
                <div id="sharebutton">></div>

                <div id="share">
                    <div class="share-box"><div class="facebook-share">f</div></div>
                    <div class="share-box"><div class="twitter-share">t</div></div>
                    <div class="share-box"><div class="google-share">g</div></div>
                    <div class="share-box"><div class="insta-share">i</div></div>
                </div>

            </aside>

CSS：

#share-wrapper {
    float:left;
    width:40px;
    height:180px;
    margin-top:80px;
}

#share {
    border:thin solid #333;
    border-left:0px;
    border-radius:0px 6px 6px 0px;
    width:30px;
    padding:0px 5px;
    height:170px;
}

#sharebutton {
    color:#333;
    border:thin solid #333;
    height:30px;
    width:30px;
    border-radius:15px;
    text-align:center;
    line-height:30px;
    margin: 0px 0px 10px 5px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    -o-transition: -o-transform 0.6s;
    transition: transform 0.6s;
}

#sharebutton:hover { color:#eee; background-color:#333; cursor:pointer; }

#sharebutton.open  {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    -o-transition: -o-transform 0.6s;
    transition: transform 0.6s;
}

.share-box,
.share-box img {
    width:30px;
    height:30px;
}

.facebook-share,
.twitter-share,
.google-share,
.insta-share { width: 100%; height: 100%; line-height: 30px; text-align: center; color:#333; border:thin solid #333; border-radius:15px; margin:10px 0px; background-color:#eee; cursor:pointer;}

.facebook-share:hover,
.twitter-share:hover,
.google-share:hover,
.insta-share:hover { background-color:#333; color:#eee; }

jQuery：

$(document).ready(function () {

    $("#sharebutton").click(function () {

        $("#share").toggle("slide");
        if ($("#sharebutton").hasClass("open")) {
            $("#sharebutton").removeClass("open");
        }
        else {
            $("#sharebutton").addClass("open"); 
        }
    });
});

Answer 1

将您的js更改为以下内容。您可以隐藏share div并将open类添加到sharebutton中。因此，您的状态与单击sharebutton时的状态完全相同。

$(document).ready(function () {

    $("#share").hide(); // You set display:none to your share div
    $("#sharebutton").addClass("open"); // You add the open class to the sharebutton

    $("#sharebutton").click(function () {

        $("#share").toggle("slide");
        if ($("#sharebutton").hasClass("open")) {
            $("#sharebutton").removeClass("open");
        }
        else {
            $("#sharebutton").addClass("open"); 
        }
    });
});

JsFiddle