Question

我遇到了问题，所以我开始和我的朋友建立一个网站，只是为了消遣无聊，我们遇到了问题。我使用输入做了一个响应式导航栏，但是我不知道该如何做，例如检查输入后，div“中间”将消失。我是否有可能以某种方式将此输入连接到div middle？非常感谢：）

.nav-toggle:checked ~ nav{
  transform: scale(1, 1);
  /*display: block;*/
}

.nav-toggle:checked ~ nav a{
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 1024px) {
  .nav-toggle-label {
    display: none;
  }

  <header>
    <h1 class="logo">title</h1>
    <input type="checkbox" id="nav-toggle" class="nav-toggle">
    <nav>
      <ul>
        <li><a href="#">abc</a></li>
        <li><a href="#">acba</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
      </ul>
    </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </header>


  <div class="content">
    <div class="middle">

    <h2>title</h2>
    <img src="img/brandlogo.png" alt="alter" height="410" width="410">
    <p class="button">order</p>
    </div>
  </div>

Answer 1

所有您需要做的就是单击该类将其切换到复选框。

$('.nav-toggle').on('click', function(){
      $('.middle').toggle();
});

.nav-toggle:checked ~ nav{
  transform: scale(1, 1);
  /*display: block;*/
}

.nav-toggle:checked ~ nav a{
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 1024px) {
  .nav-toggle-label {
    display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <h1 class="logo">title</h1>
    <input type="checkbox" id="nav-toggle" class="nav-toggle">
      <nav >
        <ul>
          <li><a href="#">abc</a></li>
          <li><a href="#">acba</a></li>
          <li><a href="#">abc</a></li>
          <li><a href="#">abc</a></li>
          <li><a href="#">abc</a></li>
          <li><a href="#">abc</a></li>
        </ul>
      </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </header>


  <div class="content">
    <div class="middle">

    <h2>title</h2>
    <img src="img/brandlogo.png" alt="alter" height="410" width="410">
    <p class="button">order</p>
    </div>
  </div>

Answer 2

您可以使用jquery来执行操作。我只是确定了复选框单击的事件，并检查了该复选框是选中还是未选中。因此，当选中该选项时，我将div隐藏在中间类中。否则我会显示它。

<script type="text/javascript">
$(document).ready(function(){
$("#nav-toggle").click(function(){
if($(this).is(':checked')) {
  $("div.middle").hide();
}
else
{
  $("div.middle").show();
}
});
});
</script>

不要忘记添加CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

将上述两个代码添加到头部或在关闭正文标签之前。

检查输入时如何隐藏div？

2 个答案: