Question

我想创建社交侧边栏，点击箭头时可以隐藏它。它隐藏在左边缘。我尝试切换类，if语句，但它只隐藏它，并且在第二次单击后不显示。这是我现在的代码：

javascript-jQuery：

$(".socialArrow").click(function () {
    $(".arrowLeft").toggleClass("fa-angle-left fa-angle-right");
});
var wrapper = document.getElementById("socialWrapper");
$(".fa-angle-left").click(function () {
    wrapper.style.marginLeft = ("-80px");
});

$(".fa-angle-right").click(function () {
    wrapper.style.marginLeft = ("0px");
});

HTML：

<div class="socialContainer">
    <ul id="socialWrapper">
        ...some links...
    </ul>

    <span class="socialArrow">
        <i class="arrowLeft fa fa-angle-left"></i>
    </span>

</div>

知道怎么解决吗？

对不起我的英语，我不是来自英国/美国。

Answer 1

所以当第一个$（＆＃34; .fa-angle-right＆＃34;）选择器运行时，还没有这样的类项，所以click（）不适用于任何东西。稍后您将使用该类创建一个元素。所以你真的需要在课程改变后重新运行那些click（）作业。像：

function setClick() {
    $(".fa-angle-left").click(function () {
        wrapper.style.marginLeft = ("-80px");
    });
    $(".fa-angle-right").click(function () {
        wrapper.style.marginLeft = ("0px");
    });
}

$(".socialArrow").click(function () {
    $(".arrowLeft").toggleClass("fa-angle-left fa-angle-right");
    setClick();
});

var wrapper = document.getElementById("socialWrapper");

这样，每次类更改时，您的click事件都会重置。

Answer 2

它应该与toggleClass一起使用，这样：

$(".socialArrow").click(function () {
    $("#socialWrapper").toggleClass("closed");
});

和CSS：

#socialWrapper.closed {
    margin-left: -80px;
}

Javascript只隐藏元素

2 个答案: