Question

所以，我有一个问题。在我的一个项目中，我希望在单击标题时为面板添加slideToggle功能。我基本上想要这个。

问题是，当我点击标题（一个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是否与它有关，但我有预感。可能会出现问题吗？我不知道为什么会这样，因为我根本没有改变它。我再次强调，我只是在寻找导致它不起作用的东西。如果您认为可以直接帮助我并需要更多信息，请询问。

谢谢！

Answer 1

我认为这就是你所需要的。如果这对你有用，请告诉我。

$(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>

Answer 2

我的问题是我的h3我的目标是点击，被另一个div掩盖了。感谢@josephting的解释，我需要将我的z-index调整为更高，如下所示：

h3 {
  z-index: 2;
}

检查你的元素是否被其他东西阻止的一个好方法是使用@junkfoodjunkie解释的这个函数，它将你点击的元素打印到控制台日志。

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

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

标题不起作用的Jquery .click（）

2 个答案: