Question

我尝试使用jQuery来确定li中的任何（并非所有）子ul是否都是焦点，如果没有，则触发脚本的其余部分。我使用的代码起始于：

 if($('ul').children('li').is(":focus"))  {
  // do nothing {
 else {
  // do script
 }

和

if($('ul li:focus').length == 0 ) {
  // do script
}

和

if(!($('ul li').is(":focus"))) {
  // do script
}

一切都没有成功，要么没有任何反应，要么仅适用于第一个li。我已经使用了控制台日志，似乎这些if语句都传递为true，其中的脚本应该从父ul中删除该类，如下所示：

 $(this).parent().removeClass('classname');

在if statement之前我确定是否有任何列表元素blurred，所有列表元素都汇集在一起（将if statement替换为上述所有元素）：

var navItem = $('.class li ul');
navItem.on('blur', 'li', function() {  
  console.log("blur fired");
  if (!($(this).parent.find('li').is(":focus"))) {
     console.log("No focus on li children fired");
     $(this).parent().removeClass('classname');
  }
});

不幸的是，这是在一个有限的平台上，所以我的能力是有限的，虽然我希望jQuery不受这些限制的限制，只是动态的html元素。

更新

我通过以下方式使所有列表元素的tabindex为1：

navItem.find('li').attr("tabindex", "1");

目前发生的情况是，如果我在第一个列表元素模糊后通过下拉列表导航消失（类已从父ul中移除），但它继续浏览列表（因为它是offcanvas，而不是display: none这是平台主题开发的方式，每当一个项目被选中时，都会触发console.log个事件。

Answer 1

您可能已经注意到，：{event}事件未在LI元素中触发，它仅触发具有<A>nchor属性的href元素。因此，为了实现您期望的行为，我建议您在LI元素中添加锚点并检查其focus。

按照您的问题的解决方案：Solution

HTML

<ul>
<li>
  <a href="#">1</a>
  <ul>
    <li>
        <a href="#">1.1</a>
    </li>
    <li>
        <a href="#">1.2</a>
    </li>
  </ul>
</li>
</ul>

CSS

li { border: 1px solid #000; }
li a:focus { background-color: #F00;display:block; }

JQUERY

(function(){ 

    $('body').on('keyup', checkFocused)        

    function checkFocused() {
        console.log($('ul li a:focus').text())
    }   

})()

jQuery是任何关注孩子的

1 个答案: