Add/remove class of tag when other child links are hovered over

When I hover over the parent links in my menu the class "toggle-active" is added to a span tag so the arrow image is changed. I also want this class to be added to the span tag when I'm hovering over the child links of the parent link inside the .sub-menu container, but I cannot get it to work. Here is the structure of the menu with the jQuery I'm using::

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");
    });
开发者_Go百科
    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>

First of all, you might want to consider using :hover pseudoclass instead of jquery for this. For example, it's described here. It would clear all that javascript mess.

As for this particular issue, have you considered detecting hover on parent element li.menu-item? It includes each particular menu item (like 'abstract' and all its submenu elements ('design', 'blog' and 'full width page').
It could look like this

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

Or, if you need to select that particular span,

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

edit
Relevant piece of code from website:

<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>

I see a few problems.

.sub-menu

has that dash so it doesn't match this ul here

<ul class="submenu">

Next, Javascript closures are tricky. In this bit of code here, "this" stops meaning the "li" and starts meaning the element you matched on, which is the "a".

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

In other words, you should do it this way

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

Finally, I'd just do the whole thing thusly.

$(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>

Edited

Now it adds the classes and spans. ghostpool, "find" targets children, so it only shows the correct sub navigation. Copy and paste that HTML and try it for yourself.