Question

我尝试了很多东西。在编程方面我是新手，但学习起来很有趣。在这种情况下，我在点击<ul>时尝试显示.menyIkon。这样可以提高移动设备的可用性。

希望你能提出一些建议，或指出我正确的方向。我现在卡住了..

代码如下：

HTML

<!DOCTYPE html>

<html>
<head>
    <title>Responsiv</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <link rel="stylesheet" type="text/css" href="hide_show_009.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src="hide_show_009.js" type="text/javascript"></script>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>

    <div class="wrapper">

           <header>

                <a href="#" class="menyIkon"></a>
                <a href="#" class="menyLogo"></a>

                <div class="meny">

                    <ul>
                        <li><a href="#">Hjem</a></li>
                        <li><a href="#">Produkter</a></li>
                        <li><a href="#">Tjenester</a></li>
                        <li><a href="#">Om</a></li>
                    </ul>

                </div>
            </header>
    </div>


</body>
</html>

CSS

body
{
    margin: 0;
    padding: 0;
}

.wrapper
{
    position: relative;
    background-color: gray;
    height: 1024px;
    width: 80%;
    max-width: 1024px;
    margin-right: auto;
    margin-left: auto;
}

.meny
{
    width: 100%;
    margin-left: 0 auto;
    margin-right: 0 auto;
    max-width: 1024px;
    height: 50px;
    float: left;
    background-color: green;
}

.meny ul
{
    text-align: center;
    padding: 0;
    margin: 0;
}

.meny li
{
    display: block;
    width: 25%;
    float: left;
    line-height: 50px;
}

.meny ul li a
{
    display: inline-block;
    color: white;
    text-decoration: none;
}

.menyIkon
{
    display: hidden;
    width: 50px;
    height: 50px;
    background: url(knapp_mobil_liten_50px.png) no-repeat center;
}

.menyLogo
{
    display: hidden;
    height: 50px;
    width: 284px;
    background: url(header_001_mobil_50px.png)no-repeat center;
}





@media only screen and (max-width : 900px)
{
    .wrapper
    {
        width: 100%;
        max-width: 640px;
        background-color: #d3d3d3;
    }

    .meny
    {
        background-color: #34a5f5;
    }

    .meny ul li
    {
        display: none;
    }

    .showMeny
    {
        background-color: yellow;
    }

    .menyIkon
    {
        display: inline-block;
        position: absolute;
        right: 10px;
    }

    .menyLogo
    {
        display: inline-block;
        position: absolute;
        left: 0;
    }
}

的jQuery

$(document).ready(function(){
    $(".menyIkon").click(function(){
        $(".meny").toggleClass(".showMeny");
    });
});

Answer 1

您的问题在于toggleClass(".showMeny")您不需要.。将其更改为toggleClass("showMeny")，您应该好好去！

Answer 2

删除。来自你的toggleClass函数：

http://jsfiddle.net/isherwood/v6e5n

$(".menyIkon").click(function(){
    $(".meny").toggleClass("showMeny");
});

响应式菜单切换图像点击

2 个答案: