Простой jQuery тумблер с картой bulma не работает - PullRequest
Новая
       17

Простой jQuery тумблер с картой bulma не работает

0 голосов
/ 19 февраля 2020

У меня есть небольшая карта булмы. Я пытался отобразить его, когда нажимал на значок: 

  <div class="card">
    <header class="card-header">
      <p class="card-header-title">
        Component
      </p>
      <a href="#" class="card-header-icon" aria-label="more options" id="server">
        <span class="icon">
          <i class="fas fa-angle-down" aria-hidden="true"></i>
        </span>
      </a>
    </header>
    <div class="card-content is-hidden" id="server-content">
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
        <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
        <br>
        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
      </div>
    </div>
  </div>

Это я пытался: 

$(document).ready(function() {

  $("#server").click(function() {
    $("#server-content").toggle();
  });
});

Но это не сработало. В моей голове HTML я делаю это: 

  <script src="js/jquery.js" type="text/javascript"></script>
  <script src="js/main.js" type="text/javascript"></script>

В основном файле. js это фрагмент кода сверху. Когда я помещаю предупреждение в функцию jquery, оно появляется, но содержимое все еще скрыто.

1 Ответ

1 голос
/ 19 февраля 2020

Вам просто нужно использовать функцию toggleClass jQuery вместо переключения. is-hidden класс в bulma будет скрывать div, к которому он применяется. Пожалуйста, проверьте на https://jsfiddle.net/rutsxz91/3/

$(document).ready(function() {

  $("#server").click(function() {
    $("#server-content").toggleClass('is-hidden');
  });
});
...