显示/隐藏 <div> 点击图片答案

【问题标题】：Show/Hide <div> clicking on an img显示/隐藏 <div> 点击图片
【发布时间】：2017-07-31 01:12:14
【问题描述】：

我有一张图片，我想显示或隐藏点击该图片的 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 定位到我想要的位置，而不会失去脚本效果？

谢谢！

【问题讨论】：

请设置一个jsfiddle来演示
我没有看到任何问题，它在这里工作正常：jsfiddle.net/hqvy3Lu7
我尝试设置 jsfiddle 但它不起作用。这是链接：jsfiddle.net/4v3qzjcL 你可以在这里看到现场演示（有问题）：openews.it/gommista/gommeincasa.php

标签： jquery show-hide togglebutton

【解决方案1】：

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

img.menubutton {
    z-index: 999;
}

【讨论】：

【解决方案2】：

不是click的问题。它是由ul 元素的绝对位置覆盖img 元素引起的。你可以试试点击img的顶部，就可以了。

所以添加css：

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

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

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

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

【讨论】：

【解决方案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

【讨论】：