前端网页开发

Question

我想制作右上角的按钮以及在 codepen.io 站点的角落单击它后显示的内容。有人可以修复我的代码并指出错误吗？

$(document).ready(function(){
        $(".nut").click(function(){     
           $(".choose").toggle(200);
        });
    });

@import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);

html, body{

    font-family: 'Open Sans', sans-serif;
}
#container{
     background-color: #0d0d0d; 
}
.nut{
    position: absolute;
    top: 10px;
    right: 10px;
}
.nut a img{
    border-radius: 3px;
    cursor: pointer;
    height: 44px;
}
.choose{
    border: 1px solid black;
    width: 200px;
    height: 350px;
    position: absolute;
    top: 64px;
    right: 0;
    display: hidden;
}
.choose ul{ 
    padding: 0px;
    list-style-type: none;
}
.choose .one li{    
    cursor: pointer;
    position: ralative;
    padding: 8px 15px 10px; 
}
.choose .one li a{  
    font-size: 15px;
}
.choose .one li:nth-child(7){   
    border-bottom: 1px solid black;
    margin-bottom: 3px;
}
.choose .one li:hover{
    background-color: #e6e6e6;
}
.choose .two li{
    padding: 0 ;
    display: inline;
    opacity: .5;
}
.choose .two ul li{
    font-size: 7px;
}
.choose .two li:hover{
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="nut">
        <a><img src="//gravatar.com/avatar/7630787fd05d0b926f921213710bb074?s=80">
        </a>
    </div>
    <div class="choose">
        <ul class="one">
            <li><a>New Pen</a></li>
            <li><a>New Post</a></li>
            <li><a>Recent Activity</a></li>
            <li><a>Embed Theme Builder</a></li>
            <li><a>Settings</a></li>
            <li><a>Help</a></li>
            <li><a>Log Out</a></li>     
            <li><a>Your Profile</a></li>
            <li>
                <ul class="two">
                    <li><a>Pens</a></li>
                    <li><a>Posts</a></li>
                    <li><a>Collections</a></li>
                </ul>
            <li>
        </ul>
    </div>

Answer 1

看看我的例子。您需要做的就是拥有正确的 CSS 并切换开放类：JSFiddle

$(document).ready(function(){
        $(".user-stuff").click(function(){     
          $('.user-dropdown').toggleClass('open');
        });
    });

@import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);
a {
    font-family: 'Lato';
}

.user-dropdown {
    background: white;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    position: absolute;
    top: 100%;
    padding: 5px 0;
    width: 200px;
    color: #222;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: -webkit-transform 0.15s, opacity 0.15s;
    transition: transform 0.15s, opacity 0.15s;
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right
}
.open.user-dropdown {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}
#mini-personal-avatar {
    border-radius: 2px;
    cursor: pointer
}
.link-list,
.link-list ul,
.link-list ol {
    list-style: none
}
.link-list a {
    color: black;
    display: block;
    padding: 8px 15px 10px;
    line-height: 1.1;
    text-shadow: none;
    text-decoration: none
}
.link-list a:hover,
.link-list a:focus {
    color: inherit;
    background: #E7E7E7
}
.link-list a.active {
    background: #ccc
}
.link-list a.active .view-meta {
    color: #666
}
.user-dropdown {
    top: 45px;
    left: 0 !important;
    right: 0;
}
.user-dropdown>li {
    position: relative
}
.user-dropdown>li.sep-after {
    border-bottom: 1px solid #666;
    padding-bottom: 5px
}
.user-dropdown>li.sep-after+li {
    padding-top: 5px
}
.user-dropdown .context-switcher {
    position: relative;
    padding: 0 !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user-stuff header-chunk">

    <img id="mini-personal-avatar" src="//gravatar.com/avatar/b10c8837fdebfca4078b6bad5217c2de?s=80" width="44" height="44" class="user-avatar" alt="User Gravatar" data-dropdown="#user-dropdown">

</div>

<ul class="user-dropdown link-list is-dropdown" id="user-dropdown">

    <li class="dropdown-newpen">
        <a href="/pen/">
      New Pen
    </a>
    </li>

    <li class="dropdown-newpost">
        <a href="/write/">
      New Post
    </a>
    </li>

    <li class="dropdown-activity">
        <a href="/ilanus/activity/">
      Recent Activity
    </a>
    </li>

    <li class="dropdown-embedbuilder">
        <a href="/ilanus/embed/builder/public/">
      Embed Theme Builder
    </a>
    </li>


    <li class="dropdown-yoursettings">
        <a href="/ilanus/settings/editor/">
      Settings
    </a>
    </li>

    <li class="dropdown-help">
        <a href="http://blog.codepen.io/documentation/">
      Help
    </a>
    </li>

    <li class="dropdown-logout sep-after">
        <a href="/login/logout" id="logout">
      Log Out
</a> </li>

</ul>