我的javascript触发器在我的代码中没有使用css媒体查询

Question

I am creating a web project. 我正在创建一个Web项目。 I want to toggle hide show in JavaScript. 我想在JavaScript中切换隐藏节目。

<nav id="navbar" class="sticky">
    <div id="logo"><a href="Javascript: xs();" class="lounch" id="xs">&#9776;</a><a href="Javascript: sm();" class="lounch" id="sm">&#9776;</a><a href="index"><img src="./logo/logo.png" alt=""></a></div>
    <div class="links">
      <div class="link ac"><a href="index" class="active">index</a></div>
      <div class="link"><a href="Javascript: alrt();">about</a></div>
      <div class="link"><a href="Javascript: alrt();">explore</a></div>
      <div class="link"><a href="Javascript: alrt();">article</a></div>
      <div class="link"><a href="Javascript: alrt();">contact</a></div>
    </div>
    <div class="connect">
      <a href="signin">sign in</a>
      <a href="signup">sign up</a>
    </div>
  </nav>

This is my trigger button. 这是我的触发按钮。

<div id="logo"><a href="Javascript: xs();" class="lounch" id="xs">&#9776;</a><a href="Javascript: sm();" class="lounch" id="sm">&#9776;</a><a href="index"><img src="./logo/logo.png" alt=""></a></div>

This is trigger, for small screen. 对于小屏幕，这是触发器。 I want to hide/show .links on click #xs . 我想隐藏/显示.links上点击#xs 。

Scss code of .links .links的Scss代码

.links{
    display: flex;
    align-items: center;
    margin: auto;
    .link{
      margin: 10px;
      align-items: center;
      a{
        text-transform: uppercase;
        padding: 7px;
        border: 2px solid;
      }
      a.active,a:hover{
        color: $bd;
        background: $lgd;
      }
      a.active:hover{
        color: $lgl;
        background: none;
      }
    }
  }
@media screen and (max-width: 700px){
 .links{
      display: block;
      text-align: center;
      margin: 0;
      margin-top: -18px;
      padding-top: 3px;
      border-bottom: 2px solid;
      border-right:  2px solid;
      width: 170px;
      .link{
        padding: 6px 20px;
        align-items: center;
        border-bottom: 1px solid;
        margin: auto;
        a.active:hover,a:hover,a.active,a{
          text-transform: uppercase;
          padding: 6px 60px 6px 10px;
          margin: auto;
          border: 2px solid;
          color: $lgd;
          background: none;
          border:none;
        }
      }
      .ac{
        background: $lgd;
        a.active:hover,a:hover,a.active,a{
           background: none;
           color: $bd;
        }
      }
      .link:last-child{
        border-bottom: 0;
      }
    }
}

my `javascript` code 我的`javascript`代码

document.getElementById('xs').addEventListener('click', function() {
  let val = document.getElementByClassName('content').style.display == 'block' ? 'none' : 'block';
  document.getElementById('content').style.display = val;
});
document.getElementById('sm').addEventListener('click', function() {
  let val = document.getElementByClassName('content').style.display == 'block' ? 'none' : 'block';
  document.getElementById('content').style.display = val;
  let vals = document.getElementByClassName('connect').style.display == 'block' ? 'none' : 'block';
  document.getElementById('connect').style.display = vals;
});

I want a trigger to show/hide `.links` 我想要一个触发器来显示/隐藏`.links`

Answer 1

Here is a very simple example of toggling visibility in a view. 这是在视图中切换可见性的一个非常简单的示例。

 document.getElementById('toggle').addEventListener('click', function() { let val = document.getElementById('content').style.display == 'block' ? 'none' : 'block'; document.getElementById('content').style.display = val; })

 <button id="toggle">Click me</button> <div id="content" style="display: block">This div can be hidden</div>

Answer 2

See below snippet 请参阅下面的代码段

in this way you can use the toggleClass function to toggle the css class 通过这种方式，您可以使用toggleClass函数来切换css类

Hope it help. 希望它有所帮助。

 $(document).ready(function(){ $("button").click(function(){ $(".target").toggleClass('hide'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <style> .hide{ display:none; } </style> </head> <body> <h2>Click Below Button to see how toggle works</h2> <p class="target hide">I am here to hide with toggle.</p> <button>Click me to toggle class</button> </body> </html>

我的javascript触发器在我的代码中没有使用css媒体查询

问题描述

I am creating a web project. 我正在创建一个Web项目。 I want to toggle hide show in JavaScript. 我想在JavaScript中切换隐藏节目。

This is my trigger button. 这是我的触发按钮。

Scss code of .links .links的Scss代码

my `javascript` code 我的`javascript`代码

I want a trigger to show/hide `.links` 我想要一个触发器来显示/隐藏`.links`

2 个解决方案

解决方案1
0 已采纳 2019-06-06 16:06:24

解决方案2
0 2019-06-06 18:17:12

我的javascript触发器在我的代码中没有使用css媒体查询

问题描述

I am creating a web project. 我正在创建一个Web项目。 I want to toggle hide show in JavaScript. 我想在JavaScript中切换隐藏节目。

This is my trigger button. 这是我的触发按钮。

Scss code of .links .links的Scss代码

my javascript code 我的javascript代码

I want a trigger to show/hide .links 我想要一个触发器来显示/隐藏.links

2 个解决方案

解决方案1 0 已采纳 2019-06-06 16:06:24

解决方案2 0 2019-06-06 18:17:12

my `javascript` code 我的`javascript`代码

I want a trigger to show/hide `.links` 我想要一个触发器来显示/隐藏`.links`

解决方案1
0 已采纳 2019-06-06 16:06:24

解决方案2
0 2019-06-06 18:17:12