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

Question

Проблема recreatable по следующему адресу:

http://streeten-new.streeten.co.uk/

• нажмите на гамбургер, чтобы открыть навигацию
• нажмите кнопку «услуги»
• нажмите «<» в подменю до попробуйте и вернитесь

По какой-то причине removeClass не удаляет класс «submenuActive». Я точно знаю, что я нацелен на правильный элемент, потому что добавление к нему тестового класса работает без проблем.

Я попытался использовать чистый javascript вместо jQuery, чтобы сделать это, я попытался сменить css напрямую с помощью jQuery, а не добавлять/удалять класс - во всех случаях я не могу отменить любые изменения, которые я делаю для этого когда открывается первое подменю.

Это разочарование, потому что открытие средства разработки и выделения

<ul class="submenuActive"> 

затем сняв выделение правило

.submenuActive { 
    left: 0!important; 
} 

скрывает подменю точно так, как я хочу, чтобы это работало, по какой-то причине я не могу получить эту работу по щелчку.

HTML код добавлен:

<nav> 
     <div class="navigation"> 
      <ul > 
       <li><a href="#">Studio</a></li> 
       <li class="parent"><a href="#">Projects</a> 
        <ul> 
         <li><a href="#">Portfolio</a></li> 
         <li><a href="#">Case Studies</a></li> 
        </ul> 
       </li> 
       <li class="parent"><a href="#">Services</a> 
        <ul> 
         <li class="menuTitle"><span class="backArrow">&#10094</span> Services</li> 
         <li><a href="#">Branding</a></li> 
         <li><a href="#">Web Design</a></li> 
         <li><a href="#">Online Marketing</a></li> 
         <li><a href="#">Marketing</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 

      <a id="tel" href="tel:02076313720"><button>Call us now</button></a> 
    <!--  <p>for your free design consultation</p>--> 
     </div> 
    </nav> 

Javascript код добавлен:

$(".parent").click(function(){ 
     $(this).find("ul").first().addClass("submenuActive"); 
    }); 

    $(".menuTitle").click(function(){ 
     $(this).closest("ul").removeClass("submenuActive"); 
     $(this).closest("ul").addClass("test"); 
    }); 

Answer 1

При нажатии на пункт подменю, событие щелчка пузырится в DOM и повторно запускает щелчок на родителя. Постарайтесь подавить, что с:

$(".menuTitle").click(function(e){ 
    e.stopPropagation(); 
    $(this).closest("ul").removeClass("submenuActive"); 
    $(this).closest("ul").addClass("test"); 
}); 

Answer 2

Вы можете удалить класс, делая это:

В HTML:

<ul class="submenuActive" onclick="RemoveClass()">

В Jquery

<script> 
function RemoveClass() 
{ 
$(this).removeClass("submenuActive"); 
} 
</script> 

Answer 3

Я сделал я работаю с использованием .parent("ul").removeClass("submenuActive"); вместо .closest()

В documentation,

Учитывая объект JQuery, представляющий собой набор элементов DOM, то. ближайший метод() ищет эти элементы и их предков в дереве DOM и создает новый объект jQuery из соответствующих элементов.

Поскольку $(this) представляет собой один элемент dom в этом случае, вы никогда не сможете получить набор элементов. Таким образом, .closest() не работает в вашем случае.

Answer 4

При нажатии на .menuTitle это стрельба событие .parent а .Для решения вам нужно stopprogating событие от ребенка к родителю

Использование event.stopPropagation(); to do this thing

$(".parent").click(function(){ 
     $(this).find("ul").first().addClass("submenuActive"); 
    }); 

    $(".menuTitle").click(function(event){ 
     $(this).closest("ul").removeClass("submenuActive"); 
     $(this).closest("ul").addClass("test"); 
     event.stopPropagation(); 
    });