Question

在下面的脚本中，当我用锚点前面的段落标记替换换行标记时，＆＃39;收缩＆＃39; jQuery函数不起作用 - 当我单击标签时，表总是显示并且不会缩小。

无论我是否应用结束段落标记，都是如此。

EG：在下面的示例中，面板一（带换行标签）将切换，但面板二（带有段落标签）将是静态的。

<html>
<head>
<meta charset="utf-8"/>
<title>tryShrink</title>
<script src="jquery-3.2.1.min.js"></script>
</head>

<body>
tryShrink
<br><a href="#" class="Shrink">panel one</a>
<ul>
<li>line1
<li>line2
<li>line3
</ul>

<p><a href="#" class="Shrink">panel two</a>
<ul>
<li>line4
<li>line5
<li>line6
</ul>

<script>
jQuery(document).ready(function(){
    $('.Shrink').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});
</script>
</body>
</html>

当然，我总是可以使用2个换行符而不是段落，但我想了解为什么无害的标签可以破坏jQuery。

Answer 1

因为现在没有<p>First name: <input type="text" data-bind="textInput: name" /> </p> <p>Last name: <input type="text" data-bind="textInput: lastName" /></p> <button data-bind="click: getName">Get name</button>  <hr /> <p>Activity</p> <input type="text" data-bind="activity().description" />  <button data-bind="click: activity().getActivityName">Try me</button>  <script src="~/Scripts/knockout-3.4.2.js"></script> <script src="~/Scripts/js/client.js"></script> Shrink类在另一个父级内。

您需要更改为：

next()

Answer 2

这是因为ul（或任何块级元素）不能位于p元素内，因此它的存在会关闭未闭合的<p>。因此，.Shrink是p的唯一孩子，并且没有.next()。

所以<p>并不像你想象的那么无害。它从根本上改变了DOM的结构。理解各种元素类型的语义很重要，因为它们必须正确使用。

由于您希望中断位于<a>之上，因此您只需在<p>之前正确关闭<a>，它就可以正常工作，但<br>似乎是一种更好的休息方式。

<p></p>
<a href="#" class="Shrink">panel two</a>
<ul>
<li>line4
<li>line5
<li>line6
</ul>

或者如果您想要包装a和ul元素，请使用能够嵌套块元素的内容，例如div。

<div>
    <a href="#" class="Shrink">panel two</a>
    <ul>
    <li>line4
    <li>line5
    <li>line6
    </ul>
</div>

Answer 3

<br>没有包装您的第一个<a>，因此您的下一个元素是<ul>。

<br>
<a href="#" class="Shrink">panel one</a>
<ul>
<li>line1
<li>line2
<li>line3
</ul>

然而，<p>包裹了您的第二个<a>，因此没有next元素：

<p>
   <a href="#" class="Shrink">panel two</a>
</p>
<ul>
<li>line4
<li>line5
<li>line6
</ul>

Answer 4

您可以使用.index()作为参数this传递给.eq()以选择下一个<ul>元素

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>tryShrink</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    jQuery(document).ready(function() {
      var a = $("a.Shrink");
      var ul =  $("ul").hide();
      a.click(function(e) {
        e.preventDefault();
        ul.eq(a.index(this)).toggle();
      });
    });
  </script>
</head>

<body>
  tryShrink
  <br><a href="#" class="Shrink">panel one</a>
  <ul class="Shrink">
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
  </ul>

  <p><a href="#" class="Shrink">panel two</a></p>
  <ul class="Shrink">
    <li>line4</li>
    <li>line5</li>
    <li>line6</li>
  </ul>
</body>

</html>

为什么这个段落元素会阻止jQuery工作？

4 个答案: