Question

我有一个html复选框

<label class="top-side-button">
    <span></span>
    <input type="checkbox" class="side_button"  onclick="clickSidebar()">
</label>

将触发侧栏

<div class="side-menu">
        <ul id="mySidebar">
        ...
        </ul>
</div>

现在我想用js和jquery来操纵那个侧边栏。

var horizontal = screen.width;
var toggleLeft = document.getElementById("mySidebar");

function clickSidebar() {

if(toggleLeft.style.display === "none"){
    if (horizontal <= 700) {
        toggleLeft.style.display = "block";
        $('.top-side-button span').html('&times;');
        if(toggleLeft.style.display === "block"){                   
            $(".textbox_main").click(function(){
                 $(".top-side-button").trigger('click');
            });
        }
    }else {
        //do something
    }
} else {
    main.style.marginLeft = "0%";
    toggleLeft.style.display = "none";
    if (toggleLeft.style.display === "none") {
        $('.top-side-button span').html('&#9776;');
    }else{
        $('.top-side-button span').html('&times;');
    }
}
}

代码正在运行，但文本框点击事件

除外

如果页面已加载，则按如下方式处理：

<ul id="mySidebar" style="display: none;"></ul>
首先点击按钮<ul id="mySidebar" style="display: block;"></ul>
点击主框<ul id="mySidebar" style="display: none; width=80%;"></ul>
然而，即使toggleLeft.style.display为“无”，再次单击主文本框，侧边栏也会再次显示

toggleLeft.style.display的console.log表示类似：

无
块
none＆amp;块
none，block，none
1. block，none，block，none，block，...，none

显然有一些错误，但我不知道如何解决它。我也不明白为什么事件会执行，因为关闭侧边栏后function clickSidebar()不再执行了。

我也尝试使用复选框的状态取消/选中，但它没有区别，我不明白。

提前致谢，感谢任何帮助

Answer 1

感谢您的帮助，实际上是一个简单的解决方案，但却无法想到它。

我删除了：

if(toggleLeft.style.display === "block"){                   
        $(".textbox_main").click(function(){
             $(".top-side-button").trigger('click');
        });
 }

并在function clickSidebar添加

之外

$(document).ready(function(){       
    $(".textbox_main").click(function(){
        if(toggleLeft.style.display === "block"){   
            $(".top-side-button").trigger('click');
        }
    });
});

如果语句执行，即使“false”/不应该执行

1 个答案: