jQuery click работает только при двойном щелчке

Question

Я пытаюсь создать много «показать больше/меньше» на моем сайте, а раздел, в котором я застрял, - это мое резюме. Он содержит таблицу, и я хотел бы скрыть некоторые строки на загрузке страницы. Мне удалось это сделать, но шоу больше ссылок работает только при двойном щелчке, а не просто, и я просто не могу понять, почему и как я могу это исправить!

Ниже мой код JQuery:

jQuery(document).ready(function(){ 

    //About Section: 
    jQuery("#about-showMore").click(function(){ 
     var about= document.getElementById("about-more"); 
     var showAbout= document.getElementById("about-showMore"); 

     if(about.style.display == 'none'){ 
      $("#about-more").show(); 
      showAbout.innerHTML = "(Show Less)"; 
     } 
     else{ 
      $("#about-more").hide(); 
      showAbout.innerHTML = "(Show More)"; 
     } 
    }); 


    //Resume Section: 
    jQuery("#resume-showMore").click(function(){ 
     var resumeTitle= document.getElementsByClassName("table_title"); 
     var showResume= document.getElementById("resume-showMore"); 

     if(resumeTitle[0].style.display == 'none'){ 

      jQuery(".table_title").show(); 
      jQuery(".table_Des").show();  
     } 
     else{ 
       jQuery(".table_title").hide(); 
       jQuery(".table_Des").hide(); 
       showResume.innerHTML = "(Show More)"; 
     } 
    }); 
}); 

В моем HTML я добавил такое же имя классы «table_title» и «table_Des» для тех строк, которые я хотел бы скрыть.

В CSS я поставил 'display: none;' для этих двух классов:

tr.table_title{ 
    color: gray; 
    font-size: 13px; 
    font-weight: 50%; 
    display: none; 
} 

tr.table_Des{ 
    color:gray; 
    font-size: 13px; 
    font-weight: lighter; 
    display: none; 
} 

Answer 1

Попробуйте вместо этого. Вы можете использовать тот же код для своего раздела резюме, просто измените имена идентификаторов и/или классов.

$("#about-showMore").click(function(e){ 
 
    e.preventDefault(); 
 
    $('#about-more').toggle(); 
 
    
 
    if($('#about-more').is(':visible')) { 
 
     $(this).html('Show Less'); 
 
    } else { 
 
     $(this).html('Show More'); 
 
    } 
 
});

#about-more { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="about-showMore">Show More</a> 
 
<div id="about-more">More Stuff</div>

Answer 2

Вы проверили скрытый статус с помощью css и показали его с помощью функции jquery hide. Лучший способ я думаю, использовать только JQuery скрыть/показать или дисплей CSS: блок/нет и т.д.

Пример выглядит следующим образом:

//Resume Section: 
jQuery("#resume-showMore").click(function(){ 
    var resumeTitle= document.getElementsByClassName("table_title"); 
    var showResume= document.getElementById("resume-showMore"); 
    if(resumeTitle[0].style.display == 'none'){ 
     jQuery(".table_title").css('display','block'); 
     jQuery(".table_Des").css('display','block'); 
    } 
    else{ 
      jQuery(".table_title").css('display','none'); 
      jQuery(".table_Des").css('display','none'); 
      $("#resume-showMore").html("Show More"); 
    } 
});