js empêche le code au-dessus de s'exécuter

Voici un stylo avec le code HTML complet: https: // codepen. io / froggomad / pen / WLdzoB

J'écris 2 fonctions - une pour afficher le contenu caché et une pour le cacher. Je veux que la fonction show () s'exécute sur le div parent et que la fonction hide () s'exécute sur le div avec le sélecteur .click-text .

Cependant, Je passe du texte sur .click-text de show à hide, donc je ne veux pas que la fonction hide reste sur le texte à tout moment. Je veux aussi qu'il soit évident que son texte interactif lors du passage à une fonction de masquage, j'en fais un lien.

C'est très bien, mais lorsque vous essayez de définir le onclick Attr de le parent retourne à la fonction show () , rien dans le bloc hide ne s'exécute du tout.

Si je supprime la ligne définissant le onclick Attr , le script s'exécute comme prévu. Si je mets en cliquant sur Attr un autre élément, le script s'exécute comme prévu.

Cependant, avec cette ligne là-dedans, rien ne se passe et il n'y a pas de sortie dans la console pour indiquer une erreur. J'ai même défini une alerte avec le type d'élément et le nom de classe pour m'assurer que je cible le bon élément.

Obtenir le parent le plus proche du sélecteur de correspondance d'élément:

function hide(elem) {    
    var parent = getClosest(elem, '.service-category'),    
                menu = parent.querySelector("ul.service-category-menu"),
                click = parent.querySelector(".click-text")
    ;
    alert(parent + "\n" + parent.className);
    //Outputs div element with expected class name (class name is unique on each div)
    if (menu.style.display === "block") {
        menu.style.display = "none";
        click.innerHTML = "Click to Show";
        click.setAttribute('onclick', 'null');
        //the above lines don't execute when the following line is in place. There's no error in console.
        parent.setAttribute('onclick','show(this)');
    }
}

Afficher l'élément masqué ul.service-category-menu

function show(elem) {    
    var menu = elem.querySelector("ul.service-category-menu"),
               click = elem.querySelector(".click-text"),
               parent = getClosest(elem, '.service-category');
    ;
    if (menu.style.display === "none" || menu.style.display === "") {
        menu.style.display = "block";
        click.innerHTML = "<a href=\"#\">Click to Hide<\/a>";
        click.setAttribute('onclick','hide(this);');
        elem.setAttribute('onclick', 'null');
    }
}

Masquer l'élément

var getClosest = function (element, selector) {
    for ( ; element && element !== document; element = element.parentNode ) {
      if ( element.matches(selector) ) return element;
    }
    return null;
}