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

cfh9epnr 于 2023-02-06 发布在其他

关注(0)|答案(4)|浏览(106)

我对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");
});
};

css

来源：https://stackoverflow.com/questions/48803247/display-or-hide-div-and-change-its-icon-according-to-function

4条答案

按热度按时间

8qgya5xd1#

您可以将参数传递到最后一个函数中，并将其设置为所需的状态。例如：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标记中的函数onclick必须有参数（1或0）。
我修改了click事件定义来解除事件绑定，防止to多次通过函数（这样你只声明一个事件）

赞(0）回复(0）举报 2023-02-06

j5fpnvbx2#

显然，你的代码中有一些实现错误，但是作为一个初学者，你可以在以后学习如何避免它们;）我将用你的代码回答你的问题：
超文本：

<!-- 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>

联森：

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");
    });
};

希望这能有所帮助!

赞(0）回复(0）举报 2023-02-06

rxztt3cl3#

可以使用隐藏和淡入效果

;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");
    });
};

赞(0）回复(0）举报 2023-02-06

dgtucam14#

您可以使用切换事件和附加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>

赞(0）回复(0）举报 2023-02-06

我来回答

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

4条答案

相关问题

热门标签

最新问答