Question

我对Javascript很陌生，但过去两天我一直在努力学习，到目前为止，一切都已经解决了。

我正在尝试创建一个隐藏的侧边栏（div），它在触发按钮后显示，我有另一个基本相同的但不是打开它，它会关闭它。

两个按钮都关闭了：

<!-- This is one is to open the div -->
<li><a href="javascript:void(0)" class="arrow_class" onClick="openNav()"><i class="fa fa-arrow-right arrow_icon" aria-hidden="true"></i></a></li>

<!-- This is one is to close the div -->
<li><a href="javascript:void(0)" onclick="closeNav()"><i class="fa fa-arrow-left arrow_icon" aria-hidden="true"></i></a></li>

现在这里是两个按钮的代码（一个用于打开div，另一个用于关闭div）

;function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
};

;function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
};

我想要的只是一个javascript函数。有没有办法可以让第一个按钮更改其图标并根据图标更改功能？

我知道有一种方法可以使用javascript更改图标：

;$('.arrow_class').click(function() {
    $('.arrow_icon').toggle('1000');
    $("i", this).toggleClass("fa fa-arrow-left fa fa-arrow-right");
});

（显示div;左箭头;点击时，它应该隐藏div）。（div隐藏;右箭头;点击时，它应显示div）

我希望我能够清楚地解释自己

以下是三个功能再次（有没有办法在最后一个中混合这三个以使图标更改成为可能）？

;function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
};

;function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
};

;function openNav_closeNavFunction(){
;$('.arrow_class').click(function() {
    $('.arrow_icon').toggle('1000');
    $("i", this).toggleClass("fa fa-arrow-left fa fa-arrow-right");
});
};

Answer 1

您可以将参数传递到具有所需状态的最后一个函数。例如：1 =打开，0 =关闭。

这些功能可能如下：

function openNav_closeNavFunction(state){
    if (state == 1){
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
    } else {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
    }
    $('.arrow_class').unbind('click').click(function() {
        $('.arrow_icon').toggle('1000');
        $("i", this).toggleClass("fa fa-arrow-left fa fa-arrow-right");
    });
}

现在，a标签中的功能必须具有参数（1或0）。

我更改了click事件定义以取消绑定事件并阻止多次通过该函数（这样你只声明一个事件）

Answer 2

显然，您的代码中存在一些实施错误，但由于您是初学者，您可以在以后学习如何避免它们;）我将使用您的代码回答您的问题：< / p>

HTML：

<!-- This is one is to open and close the div -->
<li><a href="javascript:void(0)" class="arrow_class" onClick="toggleNav()"><i class="fa fa-arrow-left arrow_icon" aria-hidden="true"></i></a></li>

JS：

var is_nav_opened = true;

function toggleNav(){
    $('.arrow_class').unbind('click').click(function() {
        is_nav_opened = !is_nav_opened;
        if(is_nav_opened){
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
        } else {
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
        }
        $("i", this).toggleClass("fa-arrow-left fa-arrow-right");
    });
};

希望这有帮助！

Answer 3

您可以使用切换事件并附加2功能（打开和关闭）

如果要切换，请不要更改css，只需添加删除类。因为你会努力恢复css。

CSS

.w-250{
    width: 250px;
}
.ml-250{
    margin-left: 250px;
}

按钮

<button class="toggle-nav"><i class="fa fa-arrow-right"></i></button>

jquery的

$(function(){
    $('.toggle-nav').toggle(function(){
        $("#mySidenav").addClass('w-250');
        $("#main").addClass('ml-250');
        $(this).find('i').removeClass('fa-arrow-right').addClass('fa-arrow-left');
    }, function(){
        $("#mySidenav").removeClass('w-250');
        $("#main").removeClass('ml-250');
        $(this).find('i').removeClass('fa-arrow-left').addClass('fa-arrow-right');
    });
});
</script>

Answer 4

你可以使用hide和fadeIn效果

;function openNav() {
    document.getElementById("mySidenav").style.width.FadeIn(1000);
    document.getElementById("main").style.marginLeft.FadeIn(1000);
};

;function closeNav() {
    document.getElementById("mySidenav").style.width.hide(1000);
    document.getElementById("main").style.marginLeft.hide(1000);
};

;function openNav_closeNavFunction(){
    ;$('.arrow_class').click(function() {
        $('.arrow_icon').toggle('1000');
        $("i", this).toggleClass("fa fa-arrow-left fa fa-arrow-right");
    });
};

显示或隐藏Div并根据功能更改其图标

4 个答案: