确定单击项的父项是否在jQuery中具有特定类型的子项

Question

＆＃13;

＆＃13;

$(document).ready(function() {

  $('h2').on('click', function() {
    $(this).parent().children('ul').slideToggle(100);
  });
  $('h2').css('cursor', 'pointer');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h2>
    3. Kathleen
  </h2>
  <ul>
    <li class="text">
      <p>
        Expetenda periculis incorrupte at sed, esse mutat detraxit ius et, oratio dolores patrioque
      </p>
    </li>
  </ul>
</div>
<div>
  <h2>4. Fred</h2>
</div>

＆＃13;

＆＃13;

＆＃13;

当我点击标题时，我已设法显示或隐藏其下方的UL。但是我只想在标题所在的div包含UL时将光标更改为指针。我想我需要使用.has选项，但无法找出正确的语法来选择父类来检查类型为ul的子类，然后设置h2。

所以在示例中，Kathleen应该有一个指针，但Fred不应该。

Answer 1

您需要使用:has() selector检查div是否ul，然后定位<h2>

$('div:has(ul) > h2').css('cursor', 'pointer');

＆＃13;

＆＃13;

$(document).ready(function() {

  $('h2').on('click', function() {
    $(this).parent().children('ul').slideToggle(100);
  });
  $('div:has(ul) > h2').css('cursor', 'pointer');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h2>
    3. Kathleen
  </h2>
  <ul>
    <li class="text">
      <p>
        Expetenda periculis incorrupte at sed, esse mutat detraxit ius et, oratio dolores patrioque
      </p>
    </li>
  </ul>
</div>
<div>
  <h2>4. Fred</h2>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

检查兄弟姐妹而不是父母的孩子。

$(document).ready(function() {
      $('h2').on('click', function() {
        if ($(this).siblings('ul')) {
          $(this).siblings('ul').slideToggle(100);
        }
      });
    
      $('h2').each(function(index, el) {
        if ($(el).siblings('ul')) {
          $(el).css('cursor', 'pointer');
        }
      })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h2>
    3. Kathleen
  </h2>
  <ul>
    <li class="text">
      <p>
        Expetenda periculis incorrupte at sed, esse mutat detraxit ius et, oratio dolores patrioque
      </p>
    </li>
  </ul>
</div>
<div>
  <h2>4. Fred</h2>
</div>