Onclick, отображающий div как блок, не работает?

Question

Я пытаюсь отобразить текст, если вы нажмете на определенный div. Но он не работает, я также не получаю ошибок?

<p class="activiteitInfo"> 
    <a class="fancybox-inline" style="color: #f3f3f3 !important;">Meer info</a> 
</p> 
<p class="activiteitReserveer"> 
    <a href="%3C?php%20echo%20$tijd;%20?%3E" style="color: #f3f3f3 !important;">Reserveren</a> 
</p> 
<div class="hoi" style="display: none;"> 
    <?php echo $meer_info; ?> 
</div> 
<script> 
    $(document).ready(function() { 
    $(".activiteitenInfo").click(function() { 
     $(".hoi").css("display", "block"); 
    }); 
    }); 
</script> 

Answer 1

кажется, что элемент, который вы пытаетесь слушать события нажатия на есть класс activiteitInfo не activiteitenInfo, к которому вы пытаетесь слушать в вашем JavaScript.

Answer 2

Ваш класс элемента - «activiteitInfo», и вы ищете «activiteitenInfo».

Answer 3

У вас есть опечатка, пожалуйста, используйте:

<script> 
    $(document).ready(function() { 
    $(".activiteitInfo").click(function() { 
     $(".hoi").css("display", "block"); 
    }); 
    }); 
</script> 

Answer 4

$(document).ready(function() { 
 
    $(".activiteitInfo").click(function() { 
 
     $(".hoi").css("display", "block"); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="activiteitInfo"> 
 
    <button class="fancybox-inline" style="color: #0003 !important;">Meer info</button> 
 
</p> 
 
<p class="activiteitReserveer"> 
 
    <a href="%3C?php%20echo%20$tijd;%20?%3E" style="color: #f3f3f3 !important;">Reserveren</a> 
 
</p> 
 
<div class="hoi" style="display: none;"> 
 
test 
 
</div>

Answer 5

Попробуйте это. Вы используете неправильное имя класса.

$(document).ready(function() { 
 
    $(".activiteitInfo").on('click', function() { 
 
    $(".hoi").css("display", "block"); 
 
    }); 
 
});

.activiteitInfo > a { 
 
    color: blue; 
 
    } 
 
.activiteitReserveer { 
 
    color: green;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="activiteitInfo"><a class="fancybox-inline">Meer info Click Me!</a></p> 
 
<p class="activiteitReserveer"><a>Reserveren</a></p> 
 
<div class="hoi" style="display: none;"> 
 
    Text 
 
</div> 
 
<script> 
 
</script>