[jQuery] Uitklapmenu met meer dan 2 items werkt niet

[Borromini]

Ik heb een klein 'scriptje' in mijn website geïntegreerd met jQuery dat op basis van het pad (de naam van de HTML-pagina) het uitklapmenu links openhoudt. Dat werkt perfect voor twee pagina's (jQuery OR):

code:

        <script>
            $(document).ready(function(){
                $("#toggle").click(function(){
                $("div").toggleClass("hidden unhidden");
                });
            });
        </script>
        <script>
            (function() {
                if (window.location.href.indexOf('nieuwbouwprojecten.html') != -1 || window.location.href.indexOf('verbouwingen.html') != -1) {
                $("div").toggleClass("hidden unhidden");
                }
            })();
        </script>

Zodra ik probeer om daar een derde pagina aan toe te voegen werkt dit echter niet meer. document.ready herhaal ik hieronder niet want daar is niks aan gewijzigd (moet ik volgens mij ook niks aan wijzigen?).

code:

        <script>
            (function() {
                if (window.location.href.indexOf('nieuwbouwprojecten.html') != -1 || window.location.href.indexOf('verbouwingen.html') != -1 || window.location.href.indexOf('appartementen.html') != -1) {
                $("div").toggleClass("hidden unhidden");
                }
            })();
        </script>

Ik dacht eerst dat er iets mis was met de syntax maar die ziet er OK uit. Het lijkt er evenwel op dat de OR operator van jQuery met maximaal twee elementen overweg kan, waardoor dit (logischerwijs) niet werkt. Iemand een idee hoe ik dit op een andere manier met jQuery oplos?

Edit: ik heb onderstaande geprobeerd maar dat lijkt niet te werken (menu klapt dicht bij de drie pagina's). Ik weet ook niet of de laatste () in het script nodig is, het lijkt voor de code hieronder in ieder geval geen verschil te maken.

code:

        <script>
            (function() {
            if (window.location.href.indexOf('nieuwbouwprojecten.html') != -1) {
                $("div").toggleClass("hidden unhidden");
            } else if (window.location.href.indexOf('verbouwingen.html') != -1) {
                $("div").toggleClass("hidden unhidden");
            } else if (window.location.href.indexOf('appartementen.html') != -1) {
                $("div").toggleClass("hidden unhidden");
            });
        </script>

Bedankt!

[ Voor 29% gewijzigd door Borromini op 10-11-2019 10:20 ]

[Fontini]

Ziet er op zich allemaal okay uit. Al je code behalve document.ready en $(selector) is tegenwoordig vrij gemakkelijk in vanilla JS te doen en daar heb je jQuery niet meer voor nodig. Zijn tig artikelen over geschreven, dit is er een van https://www.codementor.io...-on-what-to-use-6b79xdmrv .

Los van dat gaat er in ieder geval 1 ding mis (https://api.jquery.com/toggleclass/). De functie toggleClass accepteert per documentatie 1 className. Zodra de functie wordt aangeroepen, wordt er gekeken of de class al aanwezig is. Is de class aanwezig: haal 'm weg. Is de class niet aanwezig: voeg 'm dan toe.

JS Vanilla versie (fiddle):

JavaScript:

<div id="toggle">
  <ul>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>Menu item 3</li>
    <li>Menu item 4</li>
  </ul>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() { // $(document).ready
  document.querySelector('#toggle').addEventListener('click', function(event) { // $("#toggle").click
    this.classList.toggle('hidden'); // omdat je op #toggle geklikt hebt is dit de scope van de event listener. this is hier dus eigenlijk je <div id="toggle"> element.
  });
});

</script>

Anyhow, happy coding!

[Borromini]

Bedankt - alleen ken ik niks van jQuery of JS zelf... Ik heb hulp gekregen met dit stukje code en dat werkte perfect voor twee submenu-items, maar nu is er dus een extra item bijgekomen en dat krijg ik niet aan de praat. Het is me ook niet duidelijk wat er net misloopt bij de if/else construct die wel met meerdere items zou moeten werken.

[Borromini]

Verder onderzoek liet zien dat de || operator met meer dan twee elementen moet kunnen werken in jQuery, dus ik ben verder gaan spitten.

De console liet zien dat het de CSP (Content Security Policy) was die het script blokkeerde, waardoor het niet meer werkte. Het aangepaste script had een andere hash die niet gewhitelist was.

Hash werd aangepast en nu werkt alles als vanouds!