创建一个简单的响应式 javascript 切换

发布于 2025-01-13 01:28:58 字数 3085 浏览 5 评论 0原文

对于侧菜单，我使用简单的 javascript 创建了一个切换：

function myFunction() {
  var x = document.getElementById("left");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

这在大屏幕上运行良好，但在移动/较小的设备上，我想从关闭侧菜单开始。我添加了 css 将显示从“阻止”更改为“无”：

@media only screen and (max-width: 600px)  {
    #left {
        z-index:10;
        position: absolute;
        background-color: #ffffff;
        display:none;
    }
}

当您最初在小型设备上打开页面时您必须单击菜单按钮两次才能激活脚本。我如何向脚本添加第二次检查以包括宽度？我想添加 'matchmedia' 但无法让它工作。

我创建了一个基本的小提琴@ https://jsfiddle.net/zouLf8ey/1/

function myFunction() {
  var x = document.getElementById("left");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#left {
  height: calc(100% - 40px);
  width: 250px;
  float: left;
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  padding: 12px;
  border-bottom: 1px solid #ededed;
  border-right: 1px solid #ededed;
}

@media only screen and (max-width: 600px) {
  #left {
    z-index: 10;
    position: absolute;
    background-color: #ffffff;
    display: none;
  }
}

#right {
  width: auto;
  height: calc(100% - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  padding: 12px;
  border-bottom: 1px solid #ededed;
}

<div class="scherm">
  <div class="schermtekst">
    <button id="menu-toggle" title="show/hide index" onclick="myFunction()">Menu</button>
    <div id="left">
      <ul id="nav">
        <li><a href="#">link 1</a> </li>
        <li><a href="#">link 2</a> </li>
        <li><a href="#">link 3</a> </li>
        <li><a href="#">link 4</a> </li>
      </ul>

    </div>
    <div id="right">
      <h1>
        <a name=""></a>Title
      </h1>
      <p>
        Good: When the screen is smaller than 600px the menu is hidden. With one click on 'menu' the toggle opens the menu. <br/> Bad: When the screen is larger than 600px you have to click the 'menu' button twice. After that all works fine. This is due
        to the difference between display 'none' and 'block'. (on a smaller screen i don't want to clutter the layout with the menu in sight. <br/>
        <em>How can i properly change the script below in the html? I tried with setting an if for width &#38;&#38; display: block</em></p>
    </div>
  </div>
</div>

任何帮助将不胜感激！干杯，艾德

原文

For a sidemenu i've created a toggle with a simple javascript:

function myFunction() {
  var x = document.getElementById("left");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

This works fine on large screens, but on a mobile/smaller device i'd like to start with the sidemenu closed. I've added css to change the display from 'block' to 'none':

@media only screen and (max-width: 600px)  {
    #left {
        z-index:10;
        position: absolute;
        background-color: #ffffff;
        display:none;
    }
}

When you initially open the page on a small device you have to click the menubutton twice to activate the script. How could i add a 2nd check to the script to include width? I thought something with adding 'matchmedia' but can't get it to work.

I've created a basic fiddle @ https://jsfiddle.net/zouLf8ey/1/

function myFunction() {
  var x = document.getElementById("left");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#left {
  height: calc(100% - 40px);
  width: 250px;
  float: left;
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  padding: 12px;
  border-bottom: 1px solid #ededed;
  border-right: 1px solid #ededed;
}

@media only screen and (max-width: 600px) {
  #left {
    z-index: 10;
    position: absolute;
    background-color: #ffffff;
    display: none;
  }
}

#right {
  width: auto;
  height: calc(100% - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  padding: 12px;
  border-bottom: 1px solid #ededed;
}

<div class="scherm">
  <div class="schermtekst">
    <button id="menu-toggle" title="show/hide index" onclick="myFunction()">Menu</button>
    <div id="left">
      <ul id="nav">
        <li><a href="#">link 1</a> </li>
        <li><a href="#">link 2</a> </li>
        <li><a href="#">link 3</a> </li>
        <li><a href="#">link 4</a> </li>
      </ul>

    </div>
    <div id="right">
      <h1>
        <a name=""></a>Title
      </h1>
      <p>
        Good: When the screen is smaller than 600px the menu is hidden. With one click on 'menu' the toggle opens the menu. <br/> Bad: When the screen is larger than 600px you have to click the 'menu' button twice. After that all works fine. This is due
        to the difference between display 'none' and 'block'. (on a smaller screen i don't want to clutter the layout with the menu in sight. <br/>
        <em>How can i properly change the script below in the html? I tried with setting an if for width && display: block</em></p>
    </div>
  </div>
</div>

Any help would be appreciated! Cheers, Ed'

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜柠檬 2025-01-20 01:28:58

   var x = document.getElementById("left");
    function myFunction() {
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    window.onresize = function(){
        if(window.screen.availWidth <= 425){
            x.style.display = "none";
    }
}

#left {
    height:calc(100% - 40px);
    width:250px;
    float:left;
    overflow-y: auto;
    overflow-x: hidden;
    display:block;
    padding:12px;
    border-bottom:1px solid #ededed;
    border-right:1px solid #ededed;
}

@media only screen and (max-width: 600px)  {
    #left {
        z-index:10;
        position: absolute;
        background-color: #ffffff;
        display:none;
    }
}

#right {
    width:auto;
    height:calc(100% - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    display:block;
    padding:12px;
    border-bottom:1px solid #ededed;

}

<html>
<body>
    <div class="scherm">
        <div class="schermtekst">
        <button id="menu-toggle" title="show/hide index" onclick="myFunction()">Menu</button>
        <div id="left">
                <ul id="nav">
    <li><a href="#">link 1</a> </li>
    <li><a href="#">link 2</a> </li>
    <li><a href="#">link 3</a> </li>
    <li><a href="#">link 4</a> </li>
</ul>

     </div>
    <div id="right">
                    <h1>
                    <a name=""></a>Title 
                </h1>
                <p>
                Good: When the screen is smaller than 600px the menu is hidden. With one click on 'menu' the toggle opens the menu. <br/> Bad: When the screen is larger than 600px you have to click the 'menu' button twice. After that all works fine. This is due to the difference between display 'none' and 'block'. (on a smaller screen i don't want to clutter the layout with the menu in sight. <br/> 
        <em>How can i properly change the script below in the html? I tried with setting an if for width && display: block</em></p>
    </div>
  </div>
</div>
</body>
</html>

强文本
使用 window.resize 方法

   var x = document.getElementById("left");
    function myFunction() {
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    window.onresize = function(){
        if(window.screen.availWidth <= 425){
            x.style.display = "none";
    }
}

#left {
    height:calc(100% - 40px);
    width:250px;
    float:left;
    overflow-y: auto;
    overflow-x: hidden;
    display:block;
    padding:12px;
    border-bottom:1px solid #ededed;
    border-right:1px solid #ededed;
}

@media only screen and (max-width: 600px)  {
    #left {
        z-index:10;
        position: absolute;
        background-color: #ffffff;
        display:none;
    }
}

#right {
    width:auto;
    height:calc(100% - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    display:block;
    padding:12px;
    border-bottom:1px solid #ededed;

}

<html>
<body>
    <div class="scherm">
        <div class="schermtekst">
        <button id="menu-toggle" title="show/hide index" onclick="myFunction()">Menu</button>
        <div id="left">
                <ul id="nav">
    <li><a href="#">link 1</a> </li>
    <li><a href="#">link 2</a> </li>
    <li><a href="#">link 3</a> </li>
    <li><a href="#">link 4</a> </li>
</ul>

     </div>
    <div id="right">
                    <h1>
                    <a name=""></a>Title 
                </h1>
                <p>
                Good: When the screen is smaller than 600px the menu is hidden. With one click on 'menu' the toggle opens the menu. <br/> Bad: When the screen is larger than 600px you have to click the 'menu' button twice. After that all works fine. This is due to the difference between display 'none' and 'block'. (on a smaller screen i don't want to clutter the layout with the menu in sight. <br/> 
        <em>How can i properly change the script below in the html? I tried with setting an if for width && display: block</em></p>
    </div>
  </div>
</div>
</body>
</html>

strong text
use window.resize method

回复收藏 0 原文

~没有更多了~