Невозможно выполнить оператор if jquery else

Question

Я добавил код в js ниже. Когда вы нажимаете на кнопку «Зарегистрироваться» или «Войти», стрелка перемещается/указывается вверх, но когда вы закрываете ее снова, она остается такой. Может кто-нибудь помочь мне выяснить, что делать.

Я попытался с помощью этого поста, но не могу сделать эту работу либо here

Вот скрипт Jquery я использую

$(document).ready(function() { 
     $('#login-trigger').click(function() { 
      $('#login-content').slideToggle(); 
      $(this).addClass('active'); 
      if ($(this).hasClass('active')) $(this).find('span').html('▲'); 

      $('#signup-content').slideUp(); 
     }) 
     $('#signup-trigger').click(function() { 
      $('#login-content').slideUp(); 
      $(this).addClass('active'); 
      if ($(this).hasClass('active')) $(this).find('span').html('▲'); 

      $('#signup-content').slideToggle(); 
     }); 
    }); 

Вот мой jsfiddle, (я знаю, что некоторые люди не прив jsfiddle но так как у меня много кода, и мне будет гораздо проще показать, что я пытаюсь сделать с ним)

Answer 1

проблема, так как вы добавляете к ней активный объект, на нажмите событие .. и сразу после, вы проверяете, если он имеет класс активный (который всегда верно) ...

использование toggleClass (переключает упомянутый класс) вместо addClass и проверить с hasClass

$(document).ready(function() { 
    $('#login-trigger').click(function() { 
     $('#login-content').slideToggle(); 
     $(this).toggleClass('active'); 
     if ($(this).hasClass('active')){    
      $(this).find('span').html('▲'); 
     }else{ 
      $(this).find('span').html('▼'); 

     } 
     $('#signup-content').slideUp(); 
    }); 
    .... //same for signup 

fiddle here

да I know some people don't pref jsfiddle .. я думаю, вы не правы, я уверен, что большинство людей предпочитают jsfiddle, а не сам код, так как он легче проверить в скрипке.

Answer 2

Вы пропустили еще часть.

Try:

$(this).toggleClass('active'); 
if ($(this).hasClass('active')){ 
    $(this).find('span').html('▲'); 
} 
else{ 
    $(this).find('span').html('▰');//code of down arrow 
} 

Fiddle here.

Answer 3

Вы никогда не удалить класс активного, так что после первого нажмите, похоже, она всегда активна, и вы никогда не изменить форму треугольника после первого щелчка ,

Этот код должен работать для входа в систему:

$('#login-trigger').click(function() { 
     $('#login-content').slideToggle(); 


     if (!$(this).hasClass('active')) { //Now is not active, I'll make it active 
      $(this).addClass('active'); //Add class 
      $(this).find('span').html('▲'); //BLACK UP-POINTING TRIANGLE 
     } else { //Now is active, I'll make it not active 
      $(this).removeClass('active'); //Remove class 
      $(this).find('span').html('▼'); //BLACK DOWN-POINTING TRIANGLE 
     } 

     $('#signup-content').slideUp(); 
    }) 

Это jsfiddle link.