如何调整JS的CLICK事件函数与CSS执行顺序

zhuluzy 2022-05-14 21:26:33

我最近修改修改ace admin页面模板，页面左侧是一个可以折叠的左侧菜单栏，右面是一个iframe。因为菜单通过点击鼠标折叠和打开（因为是网上的模板，这个菜单的打开和折叠，应该是用CSS设置的，不是JS函数。）。为了让右侧的iframe的 width 随着左侧菜单栏自动调整。我写了一个JS函数。获取菜单的<div id="sidebar" >的宽度。代码如下

$("#sidebar").click(function(){

var nowwidth = $("#sidebar").width();

alert(nowwidth); //显示获取的菜单栏宽度

//fixWidth() 是修改 iframe宽度的函数

fixWidth（nowwidth);

}
现在的问题是鼠标点击后，立即被JS函数响应，这时菜单栏还没有折叠，获取的宽度是打开状态，所以页面显示是菜单折叠了，而iframe 页面没有扩大。当再次点击折叠菜单，菜单打开，这时还是JS函数先响应，获取的是折叠时的宽度。这个怎么能够调整一下顺序，先让CSS样式执行完毕，再响应CLICK事件函数。或者还有什么其他方法，不吝赐教！！

...全文

162 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

aら　淼 2022-07-20

打赏
举报

不用把问题复杂化，你看源代码侧边栏用的css更改的是宽度还是位置还是什么，同时更改iframe的对应属性就行。给你一个宽度的例子看看：

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      html,
      body,
      .wrapper {
        height: 100%;
        margin: 0;
        font-size: 0; /* 解决div间隙 */
      }
      .aside {
        display: inline-block;
        width: 20%;
        height: 100%;
        background-color: rgb(117, 244, 235);
        transition: all 0.5s;
      }
      .content {
        display: inline-block;
        width: 80%;
        height: 100%;
        background-color: rgb(119, 244, 117);
        transition: all 0.5s;
      }
      .wrapper.expand .aside {
        width: 0;
      }
      .wrapper.expand .content {
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="aside"></div>
      <div class="content"></div>
    </div>

    <script>
      var wrapper = document.querySelector(".wrapper");
      var aside = document.querySelector(".aside");
      var content = document.querySelector(".content");
      aside.onclick = () => {
        wrapper.classList.add("expand");
      };
      content.onclick = () => {
        wrapper.classList.remove("expand");
      };
    </script>
  </body>
</html>

zhuluzy 2022-05-16

打赏
举报

问题结局的不完美
if 判断是因为我提前知道了DIV的宽度，根据宽度，设置最后iframe合适的宽度
但是当页面被其他人使用时，因为计算机屏幕的不同，显示分辨率的不同，页面就有错位，不能完美展示！
还在头疼中

zhuluzy 2022-05-16

打赏
举报

监听器，不适合反复使用，只适用于一次触发
windows onload 事件，总是不能正确运行

最后问题解决，用了一个最傻的 IF 判断，判断DIV 大，我就认为按照收缩的大小处理，就解决了

zhuluzy 2022-05-16

打赏
举报

一、监听器，实验了一下，发现这个东西时执行一次触发的，反复执行不太适合。
二、window onload 事件，一直不能正常运行？都不太成功

zhuluzy 2022-05-15

打赏
举报

我查到资料：明天上班去实验一下
有两个方法：
一、监听器，对标签使用监听器，资料说会在页面渲染完毕再执行函数 window.addEventListener(‘load',function,false);
二、 window onload 事件，也是在页面渲染后再执行
window.onload = function(){
//code
}