javascript - 如何根据当前悬停的元素隐藏和显示元素？

Question

我们需要能够根据当前悬停的元素隐藏和显示元素。我们在下面尝试了以下内容，但它没有添加 is-active类并根据悬停的其他元素将其删除。

我们如何根据当前悬停的元素隐藏和显示元素？

目标(基于以下示例):

1. 当您将鼠标悬停在 some 上时在 first 下, 显示 <div class="two" id="some-link">some link</div>使用 is-active类
2. 当您将鼠标悬停在 path 上时在 first 下, <div class="two" id="some-link">some linke</div>不应显示(删除 is-active 类)和 <div class="two" id="path-link">path link</div>应该显示(添加 is-active 类)

当前问题:

1. is-active更改悬停元素时不会删除类

$(function() {
  $('li#two').hover( function() {
    var el_two = $(this);
    var el_id = el_two.attr('id');
    var el_link = el_two.attr('data-at');
    var el_sel = '#'+el_link+'.'+ el_id;
    var el_parent = el_two.parent().parent();
    el_parent.find('.is-active').removeClass('is-active');
    $(el_sel).addClass('is-active');
  });
});

.two {
  display: none;
}
.is-active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li id="one">
    <a href="#"> first</a>
    <div class="one">
      <ul>
        <li data-at="some-link" id="two">
          <a href="#"> some</a>
        </li>
        <li data-at="path-link" id="two">
          <a href="#"> path</a>
        </li> 
        <li data-at="another-one" id="two">
          <a href="#"> another one</a>
        </li> 
      </ul>
      <div class="dropdown">
        <div class="two" id="some-link">some link text</div>
        <div class="two" id="path-link">path link</div>
        <div class="two" id="another-one">another one</div>
      </div>
    </div>
  </li>
  <li id="one">
    <a href="#"> second</a>
    <div class="one">
      <ul>
        <li>
          <a href="#"> another some</a>
        </li>
        <li>
          <a href="#"> another path</a>
        </li>  
      </ul>
    </div>
  </li>
  <li id="one">
    <a href="#"> third</a>
    <div class="one">
      <ul>
        <li>
          <a href="#"> third some</a>
        </li>
        <li>
          <a href="#"> third path</a>
        </li>  
      </ul>
    </div>
  </li> 
</ul>

Answer 1

首先，您的 .find() 使用了错误的选择器。您有 find('is-active')，这是一个元素名称选择器，您想要一个 css 类选择器，即 .is-active。

el_parent.find('.is-active').removeClass('is-active');

注意 removeClass() 你不使用 css 选择器你只使用类名因此你不需要在那个调用中的点

现在，如果您还想在鼠标悬停在元素之外时删除该类，那么您需要为此添加一个事件监听器，并从那里调用 removeClass。 .hover() 使用第二个参数来设置此类事件监听器回调。

$('li#two').hover(onHoverCallback,function(){
  //code for finding the right element
  $(el_sel).removeClass('is-active');
})

---

$(function() {
  $('li#two').hover( function() {
    var el_two = $(this);
    var el_id = el_two.attr('id');
    var el_link = el_two.attr('data-at');
    var el_sel = '#'+el_link+'.'+ el_id;
    var el_parent = el_two.parent().parent();
    el_parent.find('.is-active').removeClass('is-active');
    $(el_sel).addClass('is-active');
  },function(){
    var el_two = $(this);
    var el_id = el_two.attr('id');
    var el_link = el_two.attr('data-at');
    var el_sel = '#'+el_link+'.'+ el_id;
    $(el_sel).removeClass("is-active");
  });
});

.two {
  display: none;
}
.is-active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li id="one">
    <a href="#"> first</a>
    <div class="one">
      <ul>
        <li data-at="some-link" id="two">
          <a href="#"> some</a>
        </li>
        <li data-at="path-link" id="two">
          <a href="#"> path</a>
        </li> 
        <li data-at="another-one" id="two">
          <a href="#"> another one</a>
        </li> 
      </ul>
      <div class="dropdown">
        <div class="two" id="some-link">some link text</div>
        <div class="two" id="path-link">path link</div>
        <div class="two" id="another-one">another one</div>
      </div>
    </div>
  </li>
  <li id="one">
    <a href="#"> second</a>
    <div class="one">
      <ul>
        <li>
          <a href="#"> another some</a>
        </li>
        <li>
          <a href="#"> another path</a>
        </li>  
      </ul>
    </div>
  </li>
  <li id="one">
    <a href="#"> third</a>
    <div class="one">
      <ul>
        <li>
          <a href="#"> third some</a>
        </li>
        <li>
          <a href="#"> third path</a>
        </li>  
      </ul>
    </div>
  </li> 
</ul>