Question

我刚刚为我的老板完成了一个网站，现在他决定让我隐藏页面上的所有内容，并在用户点击页面的特定文本时显示内容。（在这种情况下，h3＆＃39; s）。

<div id="container-geral" class="container" style="margin: 0 auto;">
    <h4>Clique no nome do gráfico para mostrá-lo!</h4>
    <!-- Gráfico com o numero de estudantes matriculados em abril de 2016 por regional -->
    <div class="row">
        <h3 class="text-center">Número de estudantes matriculados em abril de <?php echo $anoSelecionadoPOST ?> por regional</h3>
        <canvas id="myChart1" style="width: 900px; height: 500px; display: none;" ></canvas>
        <script>
            var ctx = document.getElementById("myChart1");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ["Goiânia", "Jataí", "Catalão", "Goiás", "Total"],
                    datasets: [{
                        label: 'Número de estudantes',
                        data: [<?php
                $sql = "SELECT COUNT(Estudante) AS count FROM `$anoSelecionadoPOST` WHERE municipio=";
                chartData($arrayUnidades, $sql);
                ?>],
                <?php
                opcoesGrafico();
                ?>;
        </script>
    </div>
(...) //from now on, I have basically the same struct (as the one on the div with the class row above) over and over again.
</div>

所以，我需要的是一个jQuery或javaScript函数来隐藏和显示用户点击H3文本时的元素。

谢谢大家！ =）

编辑：这就是我所做的：

$(document).ready(function() {
                $(".row").each(function() {
                    $("h3").click(function(){ 
                        $(this).next("canvas").toggle();
                    });
                });
            });

问题是它隐藏并显示页面上的每个画布，而不仅仅是h3标签后面的那个画布。

Answer 1

您可以使用“on”函数将事件与jQuery绑定。

http://api.jquery.com/on/

然后你可以在回调中使用“隐藏”和“显示”功能。

http://api.jquery.com/hide/

http://api.jquery.com/show/

Answer 2

查看http://api.jquery.com/toggle/

toggle（）：显示或隐藏匹配的元素。

$('h3').on('click', function(){ 
     $(yourElement).toggle();   
});

Answer 3

您可能需要这样的结构：

<h3>Something</h3>
<div class="show-h3">
    content
</div>

然后使用jQuery操作它，如下所示：

＆＃13;

$(document).ready(function() {
  $('.show-h3').hide();

  $('h3').click(function() {
    if ($(this).next('div.show-h3').css('display') == "none") {
      $(this).next('div.show-h3').fadeIn();
    } else {
      $(this).next('div.show-h3').fadeOut();
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h3>Something 1</h3>
<div class="show-h3">
  Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>
</div>
<h3>Something 2</h3>
<div class="show-h3">
  Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>
</div>
<h3>Something 3</h3>
<div class="show-h3">
  Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>
</div>
<h3>Something 4</h3>
<div class="show-h3">
  Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>
</div>
<h3>Something 5</h3>
<div class="show-h3">
  Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>
</div>
<h3>Something 6</h3>
<div class="show-h3">
  Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>
</div>
<h3>Something 7</h3>
<div class="show-h3">
  Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>
</div>
<h3>Something 8</h3>
<div class="show-h3">
  Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>Some content
  <br>
</div>

＆＃13;

jQuery - 单击h3时切换div

3 个答案: