Question

我有一个菜单，我的用户应该可以通过按下按钮来调整它的大小。我有以下代码：

<header class='large'>
    <nav>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </nav>
</header>
<button onclick="resizeMenu()">Resize</button>




function resizeMenu()
    {
        if(exists(header.large) {
            $("header").removeClass("large").addClass("small");
        } elseif(exists(header.small)
            $("header").removeClass("small").addClass("large");
        }
    }

我真的不知道如何写这个条件。顺便说一句，我正在使用jquery。

Answer 1

您可以使用jQuery中的.hasClass：

function resizeMenu()
{
    if($("header").hasClass("large")) {
        $("header").removeClass("large").addClass("small");
    } elseif($("header").hasClass("small")) 
        $("header").removeClass("small").addClass("large");
    }
}

Answer 2

使用toggleClass()在两个班级之间切换

function resizeMenu() {
    $("header").toggleClass("large small");
}

检查元素是否具有类使用.hasClass()

function resizeMenu() {
    var $header = $('header')
    if ($header.hasClass('large')) {
        $header.removeClass("large").addClass("small");
    } else if ($header.hasClass('small')) {
        $header.removeClass("small").addClass("large");
    }
}

Answer 3

这是你想要的吗？

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("#resize").click(function () {
            $("nav").animate({
                height: ["toggle", "swing"]
            }, {
                duration: 500,
                complete: function () {

                }
            });

        });
    });

</script>
</head>
<body>
<header>
<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</nav>
</header>
<button id="resize">
    Resize</button>
</body>
</html>

Answer 4

简单写。在Jquery中使用Toggle Class来添加和删除Class

function resizeMenu()
{

   $("header").toggleClass("large small");

}

检查元素中的类是否等于值javascript

4 个答案: