Jquery .click（）不适用于标题

所以，我有一个问题。在我的其中一个项目中，我想为面板添加一个slideToggle函数，点击标题。我基本上想要这个。Jquery .click（）不适用于标题

的问题是，当我点击标题，（一个H3），没有任何反应，并检查，我说的点击功能的警报消息也是如此。我基本上都在寻找会导致这种情况发生的常见错误。 JQuery被definetely加载，我总是使用文档加载的警报消息来检查。这里是我的代码

JQuery的

$('h3').click(function(){ 
    alert("It works!"); 
    $('.content').slideToggle(); 
});

HTML

<div id="left-panel"> 
<h3>Hire Soldiers</h3> 

      <div class="content"> 
      <button onClick="hireSwordsman()">Swordsman - Cost 70 Ore</button> 
      <button onClick="hireVanguard()">Vanguard - Cost 90 Ore</button> 
      <button onClick="hireBowman()">Bowman - Cost 125 Ore</button> 
      <button onClick="hireKnight()">Knight - Cost 200 Ore</button> 
      </div> 
     </div>

我包括我的左侧面板DIV的原因是因为我不知道，如果z-index的有什么关系，但我有一种预感。可以显示是一个问题？我不知道为什么会这样，因为我根本没有改变它。我再次强调，我只是在寻找会导致它无法工作的事情。如果你认为你可以直接帮助我，并需要更多信息，那就问。

谢谢！

来源

2016-11-25 I. Smith

z-index肯定会导致这种情况发生。如果某些其他元素覆盖了您想要点击的“h3”元素，覆盖'h3“的元素将会注册点击事件。如果你在这个问题中用你的HTML代替了HTML中的HTML，并将'$ .slideToggle（）'选择器更改为'.content'，它应该可以很好地工作。 – josephting

顺便说一句，当遇到这些问题时，检查实际上被点击的一种好方法是在'ready（）'后面执行此操作：$（document）.click（function（e）{ \t console.log（e.target）; \t}）;' 但是，这会记录您点击的所有内容，因此将其注释掉或在不需要时将其删除。 – junkfoodjunkie

哇@junkfoodjunkie这实际上是超级有用的！现在我可以确定有什么东西挡住了我的h3。谢谢！ –

我的问题是，我H3我靶向单击，被另一格掩盖。感谢由@josephting我需要调整我的z-index是这样高的解释：

h3 { 
    z-index: 2; 
}

一个很好的方法来检查，如果你的元素被别的东西阻挡通过使用该功能通过@junkfoodjunkie解释打印到控制台日志您点击了什么元素。

$(document).click(function(e){ console.log(e.target); });

因此，通过将该声明添加到我的CSS，我的问题得到了解决。请记住，如果您以前使用过较高的z-index值，则可能需要根据您的标题前面的内容来提高它们。

来源

2016-11-25 01:12:37

我认为这是你需要的。请让我知道这是否适合你。

$(document).ready(function(){ 
 
$('h3').click(function(){ 
 
    $('.content').slideToggle(); 
 
}); 
 
});

.content{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="left-panel"> 
 
<h3>Hire Soldiers</h3> 
 

 
      <div class="content"> 
 
      <button onClick="hireSwordsman()">Swordsman - Cost 70 Ore</button> 
 
      <button onClick="hireVanguard()">Vanguard - Cost 90 Ore</button> 
 
      <button onClick="hireBowman()">Bowman - Cost 125 Ore</button> 
 
      <button onClick="hireKnight()">Knight - Cost 200 Ore</button> 
 
      </div> 
 
     </div>

来源

2016-11-25 00:55:45 HenryDev

这不会解决我的问题，因为我的h3被掩盖了，尽管使用document.ready（）是一个好主意。谢谢！ –

在感恩节这个季节分享一点爱，它不会公开露面，因为我还没有15个代表 –

Jquery .click（）不适用于标题

回答

相关问题