Question

嗨，我做了一个左键单击按住按钮点击并显示另一个按钮的点击。当我单击“.smaller”按钮时，左侧菜单的宽度变为0px，并出现“.bigger”按钮。但当我单击此按钮时，“.smaller”按钮的位置将更改为另一个位置。

HTML：

<html>
    <body>
        <div id="container">

            <div id="header">

            </div>

            <div id="leftmenu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Ideas</a></li>
                    <li><a href="#">Video</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>

                <div class="smaller"></div>
                <div class="bigger"></div>
            </div><!--leftmenu end-->

                    <div id="content">

                    </div>
        </div><!--container end-->      

    </body>
</html>

CSS：

body{
    margin: 0;
    padding: 0;
    background-color: #c8c8c8;
}

html{
    background-color: #c8c8c8;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
}

#container{
    width: 100%;
    height: 2000px;
}

#leftmenu{
    position: fixed;
    width: 200px;
    height: 100%;
    background: #b99d84;
    transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
    margin: 0;
    padding: 0;
}

#leftmenu:hover{
    transition: .5s ease-in;
    -webkit-transition: .5s ease-in;
    background: #a2805e;
}

#leftmenu ul{
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
    margin-top: 50px;
}

#leftmenu ul li{
    width: 100%;
    height: 50px;
    margin-bottom: 50px;
    vertical-align: middle;
}

#leftmenu ul li a{
    color: white;
    font-size: 25px;
}

#leftmenu ul li a:hover{
    transition: 0.1s ease-in;
    text-shadow: 0 0 12px white;    
}

.smaller{
    position: fixed;
    top: 22%;
    left: 0;
    width: 0;
    height: 0;
    border-top: 120px solid transparent;
    border-right: 30px solid white;
    opacity: .75;
    border-bottom: 120px solid transparent;
    transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
}

.bigger{
    position: fixed;
    top: 22%;
    left: 0;
    border-top: 120px solid transparent;
    border-left: 30px solid white;
    border-bottom: 120px solid transparent;
    display: none;
}

#content{
width: 60%;
height: 100%;
background: #d7d7d7;
margin: 0 20%;
border-left: 1px solid gray;
border-right: 1px solid gray;
 }

JQUERY：

$(document).ready(function(){

    $(".smaller").click(function(){
        $("#leftmenu").css("width", "0px");

        $("#leftmenu ul").fadeOut();
        $(".smaller").hide();
        $(".bigger").show();

       //content widths and margins
        $("#content").css("width", "80%");
        $(this).css("width", "80%");

        $("#content").css("margin", "0 auto");
        $(this).css("margin", "0 auto");
    });//smaller.click end

    $(".bigger").click(function(){

        $(".bigger").hide();    
        $(".smaller").show();

        $("#leftmenu").css("width", "200px");
        $("#leftmenu ul").fadeIn();

    });//bigger.click end   


    $("#content").css("width", "60%");
    $(this).css("width", "60%");

    $("#content").css("margin", "0 20%");
    $(this).css("margin", "0 20%");

}）;

非常感谢，如果有人能找到答案，我已经坚持了很久......

Answer 1

您的javascript中的第12行将$(this).css("width", "80%");更改为$(this).css("width", "0%");。

点击后按钮的位置会发生变化

1 个答案: