Question

我有一张图片，我想显示或隐藏点击该图片的div。当页面加载时，div应隐藏

我用过这个脚本：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("img.menubutton").click(function(){
    $("div.form").toggleClass("hide");
  });
});
</script>
</head>

<body>
<img class="menubutton" src="img/menuicon.png">
<div class="form">
    ....
</div>
</body>

它有效（但点击区域只是图像的顶部...而不是所有图像）...但如果我在css中输入相关规则：

img.menubutton {
position: fixed;
top: 5px;
left: 10px;
}

它不再起作用了。

有办法：

使用所有图像区域单击
使用css将img定位在我想要的位置，是否会失去脚本效果？

谢谢！

Answer 1

您的ul元素涵盖您的图片。您可以尝试将z-index添加到图片中。

img.menubutton {
    z-index: 999;
}

Answer 2

这不是click的问题。它由ul元素绝对位置引起的是覆盖img元素。您可以尝试单击img的顶部，它可以工作。

所以添加css：

ul.topmenu {
  margin-left: 30px;
}

PS：你的jsfiddle还有其他一些问题：

U不包括jquery
当a周围的img时，最好在a上添加点击事件，而不是img。或者您应该使用e.stopPropagation();来防止点击事件冒泡。

代码：http://jsfiddle.net/4v3qzjcL/2/

Answer 3

正如其他答案所提到的，问题是ul的绝对位置部分覆盖了您的可点击区域。

我是这样做的。

在你的小提琴中你有一个a标签。更好地使用href。给你的目标div一个id并将href设置为该值。这比孤儿#更有意义然后使用toggleClass来显示和隐藏，而不是使用toggle。

而不是使用absoute定位，这通常会导致头痛，因为它从正常文档流中获取元素，对display:inline-block使用ul并根据需要调整左边距：

   $(document).ready(function () {
   $("#frmLink").click(function () {
       var target = $(this).attr("href");//get the targer from the href attribute
       $(target).toggle();
       return false; 
   });
});

#form {
  display: none;
  position: relative;
  top: 45px;
  background: yellow;
}
div#topmenu {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 40px;
  width: 100%;
  background: #003399;
}
img.menubutton1 {
  top: 5px;
  left: 10px;
}
ul.topmenu {
  position: relative;
  display: inline-block;
  top: -5px;
  padding-left: 0;
}
li.topmenu {
  padding: 5px 40px;
  display: inline;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="topmenu">
  <a href="#form" id="frmLink">
    <img class="menubutton" src="http://www.openews.it/gommista/img/menuicon.png">
  </a>

  <ul class="topmenu">
    <li class="topmenu">Home</li>
    <li class="topmenu">Gomme in Casa</li>
    <li class="topmenu">Gomme in Deposito</li>
  </ul>
</div>
<div id="form">
  <div class="insert-form">
    <form name="inserisciGommeCasa" action="inserisciGommeCasa.php" method="POST">	<b>INSERISCI NUOVE GOMME</b>
      <br>
      <label>Marca:
        <input type="text" name="marca">
      </label>
      <br>
      <label>Modello:
        <input type="text" name="modello">
      </label>
      <br>
      <label>Dimensioni:
        <input type="text" name="dimensioni">
      </label>
      <br>
      <label>
        <input type="radio" name="tipologia" value="invernali">Invernali</label>
      <br>
      <label>
        <input type="radio" name="tipologia" value="estive">Estive</label>
      <br>
      <label>
        <input type="radio" name="tipologia" value="miste">Miste</label>
      <br>
      <br>
      <input type="submit" value="Inserisci">
    </form>
  </div>
  <div class="search-form">
    <form name="cercaGommeCasa" action="gommeincasa.php" method="GET">	<b>CERCA GOMME</b>
      <br>
      <label>Marca:
        <input type="text" name="marca">
      </label>
      <br>
      <label>Modello:
        <input type="text" name="modello">
      </label>
      <br>
      <label>Dimensioni:
        <input type="text" name="dimensioni">
      </label>
      <br>
      <label>
        <input type="radio" name="tipologia" value="invernali">Invernali</label>
      <br>
      <label>
        <input type="radio" name="tipologia" value="estive">Estive</label>
      <br>
      <label>
        <input type="radio" name="tipologia" value="miste">Miste</label>
      <br>
      <br>
      <input type="submit" value="Cerca">
    </form>
  </div>
</div>

Fiddle Version

最后，您可以通过删除br标记并将标签设置为块来使其更加语义和清晰。同时使用fieldsets分隔您的表单，并使用legend作为表单标题。

More Semantic Version

显示/隐藏<div>单击img </div>

3 个答案: