Добавить / удалить класс тега, когда другие дочерние ссылки находятся над - PullRequest
Новая
       17

Добавить / удалить класс тега, когда другие дочерние ссылки находятся над

0 голосов
/ 07 сентября 2010

При наведении указателя мыши на родительские ссылки в моем меню класс «toggle-active» добавляется в тег span, поэтому изображение стрелки изменяется. Я также хочу, чтобы этот класс был добавлен в тег span, когда я наводил курсор на дочерние ссылки родительской ссылки внутри контейнера .sub-menu, но не могу заставить его работать. Вот структура меню с jQuery, который я использую: * 

jQuery(".sub-menu").hide(); 

jQuery("#gallery-nav").find("li").each(function() {

  if (jQuery(this).find("ul").length > 0) {

    jQuery("<span class=\"gallery-toggle-button\">").appendTo(jQuery(this).children(":first"));

    jQuery("#gallery-nav li a").hover(function(){
      jQuery(this).children(".gallery-toggle-button").addClass("toggle-active");
    }, function () {
      jQuery(this).children(".gallery-toggle-button").removeClass("toggle-active");
    });

    jQuery("#gallery-nav li a").hover(function(){
      jQuery(this).next("ul").slideDown('fast');
    });

    jQuery("#gallery-nav li ul").hover(function(){
      jQuery(this).slideDown('fast');
    }, function () {
      jQuery(this).slideUp('fast');
    });

    jQuery("#gallery-nav li ul").hover(this).prev(function(){
      jQuery("#gallery-nav li a").children(".gallery-toggle-button").addClass("toggle-active");
    }, function () {
      jQuery("#gallery-nav li a").children(".gallery-toggle-button").removeClass("toggle-active");
    });
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#">Link 1 <span class="toggle-active"></span></a>
    <ul class="sub-menu">
      <li><a href="#">Sub link 1</a></li>
    </ul>
  </li>
</ul>

Ответы [ 2 ]

3 голосов
/ 07 сентября 2010

Прежде всего, вы можете рассмотреть возможность использования псевдокласса :hover вместо jquery для этого. Например, здесь описано . Это очистило бы весь этот беспорядок javascript.

Что касается этой конкретной проблемы, рассматривали ли вы возможность обнаружения наведения на родительском элементе li.menu-item? Он включает в себя каждый конкретный пункт меню (например, «абстрактный» и все его элементы подменю («дизайн», «блог» и «страница полной ширины»).
Это может выглядеть так 

li.menu-item:hover {
    // some css to change arrow here
}

Или, если вам нужно выбрать этот конкретный диапазон, 

li.menu-item:hover span.gallery-toggle-button {
    background: url('your image path');
}

редактировать
Соответствующий кусок кода с сайта: 

<li class="menu-item menu-item-type-taxonomy menu-item-530" id="menu-item-530">
<a href="http://ghostpool.com/wordpress/phideo/?gallery_categories=abstract">Abstract
    <span class="gallery-toggle-button"></span>
</a>
<ul class="sub-menu" style="display: none;">
    <li class="menu-item menu-item-type-taxonomy menu-item-531" id="menu-item-531"><a href="http://ghostpool.com/wordpress/phideo/?gallery_categories=design">Design</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-537" id="menu-item-537"><a href="http://ghostpool.com/wordpress/phideo/?page_id=101">Blog</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-539" id="menu-item-539"><a href="http://ghostpool.com/wordpress/phideo/?page_id=40">Full Width Page</a></li>
</ul>
</li>
1 голос
/ 07 сентября 2010

Я вижу несколько проблем. 

.sub-menu

имеет эту черту, поэтому она не соответствует этому ul здесь 

<ul class="submenu">

Далее, закрытие Javascript сложно. В этом фрагменте кода здесь «this» перестает означать «li» и начинает означать элемент, с которым вы подходите, то есть «a». 

jQuery("#gallery-nav li a").hover(function(){
    jQuery(this).children(... // <- "this" now means "a", not "li"

Другими словами, вы должны сделать это таким образом 

var top_li = this;
jQuery("#gallery-nav li a").hover(function(){
    jQuery(top_li).children(...

Наконец, я бы просто так все сделал. 

$(function() {
  $(".sub-menu").hide();
  $("#gallery-nav li").each(function() {
    if ($(this).find("ul").length) {
      $(this).addClass("top_menu_li");
      $(this).find("a").eq(0).addClass("top_menu_a").append($("<span/>"));
    }
  });
  $(".top_menu_li").each(function() {
    var top_menu_li = $(this);
    top_menu_li.hover(function() {
      top_menu_li.find(".top_menu_a span").addClass("toggle-active");
      top_menu_li.find(".sub-menu").show();
    }, function() {
      top_menu_li.find(".top_menu_a").removeClass("toggle-active");
      top_menu_li.find(".sub-menu").hide();
    });
  });
});
<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1");
    </script>
  </head>
  <body>
    <ul id="gallery-nav">
      <li>
        <a href="#">Link 1</a>
        <ul class="sub-menu">
          <li><a href="#">Sub link 1</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Link 2</a>
        <ul class="sub-menu">
          <li><a href="#">Sub link 2</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Отредактировано

Теперь он добавляет классы и промежутки. ghostpool, "find" предназначается для детей, поэтому показывает только правильную суб-навигацию. Скопируйте и вставьте этот HTML и попробуйте сами.

...