Javascript onclick, используя класс вместо inline

Question

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

Как я могу переключить класс onclick как «переключить», чтобы скрыть и показать контент на основе идентификатора? Таким образом, я могу иметь id = 'blah' class = 'toggle', чем он будет переключать div, используя ID 'blah'?

Как я могу иметь ссылку якорь, как:

<a id="proc" class="coco button-link toggle" style="cursor: pointer;">See Our Proclamations</a> 

Я использую простой JavaScript, основанный на использовании событие OnClick, но я хочу, чтобы не использовать событие OnClick.

<script> 
function toggle_visibility(id) { 
     var e = document.getElementById(id); 
     if(e.style.display == 'block') 
      e.style.display = 'none'; 
     else 
      e.style.display = 'block'; 
} 
</script> 

Я пытался использовать что-то вроде этого, но это определенно не получилось:

<script> 
    $(document).ready(function() { 
     $('a.toggle').click(function() { 
      var e = document.getElementById(id); 
      if(e.style.display == 'block') 
       e.style.display = 'none'; 
      else 
       e.style.display = 'block'; 
     }); 
    }); 
</script> 

К сожалению, я понимаю PHP гораздо лучше, чем я понимаю JavaScript .. Спасибо за любую помощь!

Answer 1

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

Во-вторых, не устанавливайте стиль как противоположность стиля, когда вы можете просто позвонить toggleClass().

См простой код ниже:

$(document).ready(function() { 
 
    // Set up a common click event handler for each section's clickable header 
 
    // Note the addition of the callback function's "evt" argument. All event 
 
    // handlers are automatically passed a reference to the event that triggered them. 
 
    $('.sectionHeader').click(function(evt) { 
 
     
 
    // Just toggle the CSS class that hides the element on the element that comes 
 
    // just after the one that got clicked. Obviously, setting up the HTML structure 
 
    // correctly is what makes this work. 
 
    $(evt.target.nextElementSibling).toggleClass("toggle"); 
 
    }); 
 
});

section { margin-bottom:1em; height:20vh; } 
 
.toggle { display:none; } 
 
.sectionHeader { font-weight:bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <a id="procShowHide1" class="coco button-link sectionHeader" 
 
    style="cursor: pointer;">Section 1</a> 
 
    <div id="proc1"> 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations 
 
    </div> 
 
</section> 
 
<section> 
 
    <a id="procShowHide2" class="coco button-link sectionHeader" 
 
    style="cursor: pointer;">Section 2</a> 
 
    <div id="proc2"> 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations 
 
    </div> 
 
</section> 
 
<section> 
 
    <a id="procShowHide3" class="coco button-link sectionHeader" 
 
    style="cursor: pointer;">Section 3</a> 
 
    <div id="proc3"> 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations 
 
    </div> 
 
</section>