Question

HTML

<div class="channellist" id="channellist">
  <div class="c01" id="c1"></div>
  <div class="s01" style="display:none" id="p_c1">
     <div>channel name</div>
      <div class="programs">
         <div>p1</div>
         <div>p2</div>
         <div>p3</div>
      </div>
  </div>
  <div class="c01" id="c2"></div>
   <div class="s01" style="display:none" id="p_c2">
   <div>channel name</div>
      <div class="programs">
         <div>p1</div>
         <div>p2</div>
         <div>p3</div>
      </div>
  </div>

  </div>
 <div class="c01" id="c3"></div>

脚本

$(".c01").live("mouseenter mouseleave", function(){
    var id=this.id;
    $("#p_"+id).slideToggle();
});

在类c01的mouseenter上我正在使s01显示块，而在mouseleave上我正在使s01显示无。

有10个节目。我想选择该程序。在鼠标输入时，它显示所有程序名称，当我尝试通过滚动鼠标来查看程序时，下一个div的程序将显示

我无法选择程序。它显示了下一个频道节目

我该如何解决这个问题？

Answer 1

Array.from(document.querySelectorAll(".c01")).forEach(function(c){
  c.addEventListener("mouseover", function(){
    var s = c.parentNode.querySelector(".s01");
    if(s) {
      s.style.display = "block";
    }
  });
  c.addEventListener("mouseout", function(){
    var s = c.parentNode.querySelector(".s01");
    if(s) {
      s.style.display = "none";
    }
  });
})

#c1{
  background-color: yellow;
  height: 10px;
}
#c2{
  background-color: red;
  height: 10px;
}

<div class="channellist" id="channellist">
  
  <div class="chanel-wrapper">
   <div class="c01" id="c1"></div>
   <div class="s01" style="display:none">
     <div>channel name</div>
      <div class="programs">
         <div>p1</div>
         <div>p2</div>
         <div>p3</div>
      </div>
   </div>
  </div>
  <div class="chanel-wrapper">
   <div class="c01" id="c2"></div>
   <div class="s01" style="display:none">
   <div>channel name</div>
      <div class="programs">
         <div>p1</div>
         <div>p2</div>
         <div>p3</div>
      </div>
   </div>
  </div>

  </div>
 <div class="c01" id="c3"></div>

我必须在每个关联的c01和s01周围添加一个包装器（我给了它们channel-wrapper类，但它没有被使用）。如果您不希望这样，可以在data-*中添加data-index属性（例如s01），以便将其与关联的c01相关联。您可以通过查看以下兄弟姐妹来尝试检索它（但我不会这样做）。

在mouseenter上获取下拉元素的焦点

1 个答案: