Развернуть родительское меню, если выбрано дочернее меню

Question

У меня есть меню с дополнительными дочерними меню. Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я выбираю дочернее меню после загрузки страницы, меню рушится. Я хочу открыть расширенное родительское меню.

HTML-код является:

---

<div id='cssmenu'> 
     <ul> 
      <li><a href='http://internallink.com/home'><span>Home</span></a></li> 
      <li class='active has-sub'><a href='http://internallink.com/products'><span>Products</span></a> 
       <ul> 
        <li class='has-sub'><a href='http://internallink.com/product1'><span>Product 1</span></a> 
         <ul> 
          <li><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li> 
          <li class='last'><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li> 
         </ul> 
        </li> 
        <li class='has-sub'><a href='http://internallink.com/product2'><span>Product 2</span></a> 
         <ul> 
          <li><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li> 
          <li class='last'><a href='http://internallink.com/subProduct'><span>Sub Product</span></a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li><a href='http://internallink.com/about'><span>About</span></a></li> 
      <li class='last'><a href='http://internallink.com/contact'><span>Contact</span></a></li> 
     </ul> 
    </div> 

JS является:

---

jQuery(document).ready(function() { 
    jQuery('#cssmenu').on("click","li.has-sub .holder",function() { 
     var element = jQuery(this).parent('li'); 
     if (element.hasClass('open')) { 
      element.removeClass('open'); 
      element.find('li').removeClass('open'); 
      element.find('ul').slideUp(); 
     } 
     else { 
      element.addClass('open'); 
      element.children('ul').slideDown(); 
      element.siblings('li').children('ul').slideUp(); 
      element.siblings('li').removeClass('open'); 
      element.siblings('li').find('li').removeClass('open'); 
      element.siblings('li').find('ul').slideUp(); 
     } 
    }); 

    jQuery('#cssmenu ul li.has-sub').prepend('<span class="holder"></span>'); 

}); 

Как я могу расширить меню родительского при выборе меню ребенка.

Fiddle: https://jsfiddle.net/x415mjfq/

Answer 1

У вас есть полный, абсолютный URL, в ссылках; которые могут быть использованы в ваших интересах. Просто используйте document.querySelector с квадратным селектором кронштейна, и location.href собственности:

document.querySelector("a[href='" + location.href + "']").classList.add("selected"); 

Тогда, делать все, что вам нужно сделать к нему. В этом примере я добавляю класс selected.

Fiddle