Question

我已经建立了我的投资组合网站，以便您可以隐藏/显示我的工作的不同类别 - 品牌，艺术等。

为了做到这一点，我创建了隐藏/显示按钮，并设置了一个十字X动画，将45度旋转成一个+，表示点击它是否会分别隐藏或显示类别。希望这是有道理的。

我为此目的使用了以下代码

使用Javascript：

$(function() {
            $("#buttonDigital").click(function() {
                $(".DigitalImg").toggleClass("DigitalImg-change");
            });
        });

HTML - 请注意该按钮包含在类别 - 桌面div中（仅在较大的屏幕尺寸上可见）：

<div id="categories-desktop">
    <div id="buttonDigital" style="cursor: pointer;" onclick="$('.brick.digital').toggle();">
                        <p>DIGITAL</p>
                        <img class="DigitalImg" src="img/button/x.png">
    </div>
</div>

CSS：

    #buttonDigital {
    width: 180px;
    height: 25px;
    background-color: #ff644b;
}
    .DigitalImg {
    position: relative;
    right: -158px;
    top: -16px;
    transition: 0.2s ease-out;
}

 .DigitalImg-change {
    -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg); 
        transform: rotate(45deg);
        transition: 0.2s ease-out;
 }

您可以看到我在www.jackwatson.co.uk

处的位置示例

当网站显示在宽度低于855像素的屏幕上时，我希望按钮占据屏幕的整个宽度，并且只在您向下滚动页面时显示在每个类别上方（每个项目占用全部屏幕的宽度也是。）

我复制并粘贴了相同的按钮并将它们放在div中，只显示在这个小屏幕尺寸上：

<div id="categories-mobile">
                    <div id="buttonDigital" style="cursor: pointer;" onclick="$('.brick.digital').toggle();">
                        <p>DIGITAL</p>
                        <img class="DigitalImg" src="img/button/x.png">
                    </div>
                </div>

然而，使X旋转过渡的javascript似乎在此时停止工作，我真的不确定原因。

我绝对是一个菜鸟，所以这可能是一个愚蠢的问题，我很感激您的时间来看待这一点，并非常感谢您的帮助。

Answer 1

应该只使用唯一ID，所以如果你将#buttonDigital更改为基于类的选择器.buttonDigital然后删除或更改id，这样每个div都是唯一的，并且将类添加到它们应该有效。

希望有所帮助

$(function() {
        $(".buttonDigital").click(function() {
            $(".DigitalImg").toggleClass("DigitalImg-change");
        });
    });

然后html看起来像（你想要使用-1，-2，-4这样每个按钮都是唯一的。除非你需要它，否则你也可以删除id

 <div id="buttonDigital-1" class='buttonDigital' style="cursor: pointer;" onclick="$('.brick.digital').toggle();">
                    <p>DIGITAL</p>
                    <img class="DigitalImg" src="img/button/x.png">
                </div>

javascript toggleClass仅适用于一组div

1 个答案: