使用复选框更改 css 样式

Question

I'm making an hamburger menu for my website. When I click on this hamburger, I want the rest of my page to be dark.

To achieve this, I added a div:

<div id="black"></div>

My HTML:

<nav role="navigation">
    <div id="menuToggle">
      <input type="checkbox" id="mycheckbox"/>
      <span></span>
      <span></span>
      <span></span>
      <?php
        wp_nav_menu(
          array(
            'theme_location' => 'top_menu',
            'container' => 'ul', // afin d'éviter d'avoir une div autour
            'menu_class' => 'site__header__menu', // ma classe personnalisée
          )
        );
      ?>
    </div>
  </nav>
  <div id="black"></div>

This div is in display: none, and all i want is that when i click on my hamburger menu, the display style switchs to inline/block.

I tried with JavaScript:

function functionTest() {
const cb = document.querySelector('#mycheckbox');
const black = document.querySelector('#black');
  if (cb.checked) {
    black.style["display"] = "inline";
  } else {
    black.style["display"] = "none";
  }
}

It doesn't work. Thanks in advance

Answer 1

You can achieve this using pure CSS using the tidial selector.

#mycheckbox:checked ~ div #black {
   display:block;
}

---

 body {background:#fff;} #black { background: #ccc; display:none; padding:20px; position:absolute; left:0;right:0;top:30px;bottom:0;}.opened-menu #black {display:block;}.item, .menu { display:inline-block; min-width:100px; font-size:14px; border:1px solid; padding:10px; text-align:center; } #mycheckbox:checked ~ div #black { display:block; }

 <input type="checkbox" id="mycheckbox"/> <label for="mycheckbox"> Menu </label> <div> <div id="black"> <a href="#" class="item">Item</a> <a href="#" class="item">Item</a> <a href="#" class=" menu">Menu</a> </div> </div>

Answer 2

If you want to do it CSS only, you can do the following. Keep in mind it does not work on Firefox or older browsers check compatibility here .

#black {
    display: none;
}

nav:has(cb:checked) + #black {
    display: inline;
}

Working in action: https://jsfiddle.net/6vwmy95L/22/

Otherwise, you can use an event listener;

const checkbox = document.querySelector("#mycheckbox");
const black = document.querySelector('#black');

if (checkbox) {
  checkbox.addEventListener("change", (event) => {
    if (event.currentTarget.checked && black) {
      black.style.display = "inline";
    } else {
      black.style.display = "none";
    }
  });
}

As @somethinghere said, if you are able to change your HTML to have a better structure and have greater browser support go for it.

If you are unable to change your HTML for some reason or another and do not need to support older browsers, you can use the:has approach.

If you are unable to change your HTML and you need to support older browsers, use the JavaScript approach.

You need the site to work even when JavaScript is disabled and support older browsers, then refactor your HTML and use @Marin HTML 's answer.

Answer 3

Thanks to everyone for your help. I just changed this:

<input type="checkbox" id="mycheckbox" onclick="functionTest()"/>

Jan Pfeifer said: "There is no event handler attached to anything. For example ", this solved my problem !