CSS元素无法点击

时间：2017-08-16 14:06:59

标签： jquery html css web

我制作了一个按钮，它必须用jQuery在移动版本的网站中打开菜单，但它无论如何都无法正常工作。 我只是用这个按钮和菜单进行了新项目调试，它工作正常，而且我找不到这段代码和原代码之间的任何区别。

我的大脑非常疼，请告诉我为什么这个按钮不起作用，我该怎么办呢。 （我用爆炸替换弹出菜单，看看按钮是否有效）

我正在使用jQuery UI。

$(document).ready(function() {
  $('#menu-icon').click(function() {
    $('header').toggle('explode');
  });
});
nav {
  margin-left: -35px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

#menu-icon {
  background: url(../img/mobile-menu.png) no-repeat;
  position: absolute;
  left: -9999px;
  width: 0px;
}

nav li {
  display: inline;
}

nav .left-nav {
  margin-top: -20px;
  margin-right: 0px;
  width: 200px;
  float: right;
  position: relative;
  padding-top: 20px;
}

#login {
  position: absolute;
  top: 5px;
  right: 0;
}

nav h3 {
  text-indent: -9999px;
}

nav h3:after {
  clear: both;
  display: block;
  content: ' ';
  visibility: hidden;
  height: 1%;
}

nav h3 a {
  background: url(../img/cart.png) no-repeat;
  width: 48px;
  height: 44px;
  position: absolute;
  top: 10px;
  left: 0;
  padding: 0;
}

nav h3 a:hover {
  background-color: white;
}

nav a {
  font-family: 'Cormorant Infant', serif;
  font-size: 26px;
  letter-spacing: 3px;
  margin-right: 5px;
  color: #0d0d0d;
  padding: 15px 5px;
}

nav a:hover {
  background-color: #e8e8e8;
}

@media only screen and (max-width: 768px) {
  nav {
    height: 90px;
  }
  nav ul {
    visibility: hidden;
  }
  nav .left-nav {
    margin-top: -5px;
    visibility: visible;
    padding-top: 0;
  }
  nav #login {
    letter-spacing: -1px;
    font-size: 50px;
    padding: 40px 0;
    top: -35px;
    margin-right: 55px;
  }
  nav h3 a {
    left: -73px;
  }
  #menu-icon {
    width: 78px;
    height: 65px;
    display: block;
    left: 15px;
    margin-top: 15px;
  }
  header h3 {
    text-indent: -9999px;
  }
  .news {
    width: 100%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body>
  <div class="container">
    <header>
      <h3 id="menu-icon">
        <a href="#"></a>Меню</h3>
      <nav>
        <ul>
          <li><a href="#">Прайслист</a></li>
          <li><a href="#">Подбор букета</a></li>
          <li><a href="#">Контакты</a></li>
          <li><a href="#">Доставка</a></li>
          <div class="left-nav">
            <li>
              <h3>
                <a href="#"></a>Корзина</h3>
            </li>
            <li><a href="#" id="login">Войти</a></li>
          </div>
        </ul>
        <ul class="mob-menu hidden">
          <li><a href="#">Прайслист</a></li>
          <li><a href="#">Подбор букета</a></li>
          <li><a href="#">Контакты</a></li>
          <li><a href="#">Доставка</a></li>
        </ul>
      </nav>
      <div class="banner">
        <a href="#" id="left"></a>
        <!-- image replacement лучше сделать в css без картинки -->
        <a href="#" id="right"></a>
        <!-- image replacement -->
        <h1>Цветочный Дом Полины</h1>
        <ul>
          <li id=selected>
            <a href="#"></a>
          </li>
          <li>
            <a href="#"></a>
          </li>
          <li>
            <a href="#"></a>
          </li>
        </ul>
      </div>
    </header>
</body>

1 个答案:

答案 0 :(得分：0)

问题只在于nav重叠#menu-icon。

由于它已经绝对定位，因此您可以确保#menu-icon只需点击z-index即可点击。

你说的是正确的，你使用的功能与它无关，但我继续将jQuery UI添加到代码片段中，以减轻使用.toggle()方法可能产生的混淆。

请注意，我在下面的代码段中注释了您的left和text-indent样式，以确保它一目了然地显示您应该点击的内容，但是＃39;实际上不需要#menu-icon可点击;如果你重新添加这些样式，你仍然可以点击它的隐形框。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#menu-icon').click(function() {
    $('header').toggle('explode');
  });
});
＆＃13; 
nav {
  margin-left: -35px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

#menu-icon {
  background: url(../img/mobile-menu.png) no-repeat;
  position: absolute;
  /*left: -9999px;*/
  width: 0px;
  z-index: 1;
}

nav li {
  display: inline;
}

nav .left-nav {
  margin-top: -20px;
  margin-right: 0px;
  width: 200px;
  float: right;
  position: relative;
  padding-top: 20px;
}

#login {
  position: absolute;
  top: 5px;
  right: 0;
}

/*nav h3 {
  text-indent: -9999px;
}*/

nav h3:after {
  clear: both;
  display: block;
  content: ' ';
  visibility: hidden;
  height: 1%;
}

nav h3 a {
  background: url(../img/cart.png) no-repeat;
  width: 48px;
  height: 44px;
  position: absolute;
  top: 10px;
  left: 0;
  padding: 0;
}

nav h3 a:hover {
  background-color: white;
}

nav a {
  font-family: 'Cormorant Infant', serif;
  font-size: 26px;
  letter-spacing: 3px;
  margin-right: 5px;
  color: #0d0d0d;
  padding: 15px 5px;
}

nav a:hover {
  background-color: #e8e8e8;
}

@media only screen and (max-width: 768px) {
  nav {
    height: 90px;
  }
  nav ul {
    visibility: hidden;
  }
  nav .left-nav {
    margin-top: -5px;
    visibility: visible;
    padding-top: 0;
  }
  nav #login {
    letter-spacing: -1px;
    font-size: 50px;
    padding: 40px 0;
    top: -35px;
    margin-right: 55px;
  }
  nav h3 a {
    left: -73px;
  }
  #menu-icon {
    width: 78px;
    height: 65px;
    display: block;
    left: 15px;
    margin-top: 15px;
  }
  /*header h3 {
    text-indent: -9999px;
  }*/
  .news {
    width: 100%;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
  <header>
    <h3 id="menu-icon">
      <a href="#"></a>CLICK ME</h3>
    <nav>
      <ul>
        <li><a href="#">Прайслист</a></li>
        <li><a href="#">Подбор букета</a></li>
        <li><a href="#">Контакты</a></li>
        <li><a href="#">Доставка</a></li>
        <div class="left-nav">
          <li>
            <h3>
              <a href="#"></a>Корзина</h3>
          </li>
          <li><a href="#" id="login">Войти</a></li>
        </div>
      </ul>
      <ul class="mob-menu hidden">
        <li><a href="#">Прайслист</a></li>
        <li><a href="#">Подбор букета</a></li>
        <li><a href="#">Контакты</a></li>
        <li><a href="#">Доставка</a></li>
      </ul>
    </nav>
    <div class="banner">
      <a href="#" id="left"></a>
      <!-- image replacement лучше сделать в css без картинки -->
      <a href="#" id="right"></a>
      <!-- image replacement -->
      <h1>Цветочный Дом Полины</h1>
      <ul>
        <li id=selected>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
      </ul>
    </div>
  </header>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题