web-dev-qa-db-ja.com

ブルマドロップダウンが機能しない

Bulmaドロップダウンがクリックで切り替わらないようです。以下は、ドキュメントのコードスニペットです。 https://bulma.io/documentation/components/dropdown/

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet"/>


<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Dropdown item
      </a>
      <a class="dropdown-item">
        Other dropdown item
      </a>
      <a href="#" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>
javascriptcssbulma
8
Aakash Thakur

JavaScriptを使用して、クラスis-activeを切り替える必要があります。 .dropdownに.is-activeがある場合、.dropdown-menuのdisplayをnoneからblockに変更します。

これを実装する基本的な方法を次に示します。

var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
  event.stopPropagation();
  dropdown.classList.toggle('is-active');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">


<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <!--fontawesome required for the icon-->
        <i class="fa fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Dropdown item
      </a>
      <a class="dropdown-item">
        Other dropdown item
      </a>
      <a href="#" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>
14
sol

以下は、Vanilla JSを使用していて、ドロップアウトをクリックするかEscキーを押すとドロップダウンが閉じることを確認した完全なソリューションです。

// Get all dropdowns on the page that aren't hoverable.
const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');

if (dropdowns.length > 0) {
  // For each dropdown, add event handler to open on click.
  dropdowns.forEach(function(el) {
    el.addEventListener('click', function(e) {
      e.stopPropagation();
      el.classList.toggle('is-active');
    });
  });

  // If user clicks outside dropdown, close it.
  document.addEventListener('click', function(e) {
    closeDropdowns();
  });
}

/*
 * Close dropdowns by removing `is-active` class.
 */
function closeDropdowns() {
  dropdowns.forEach(function(el) {
    el.classList.remove('is-active');
  });
}

// Close dropdowns if ESC pressed
document.addEventListener('keydown', function (event) {
  let e = event || window.event;
  if (e.key === 'Esc' || e.key === 'Escape') {
    closeDropdowns();
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">

<body style="margin: 2rem">

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-ui-actions">
      <span>Actions</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-ui-actions" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Option 1
      </a>
      <a href="#" class="dropdown-item">
        Option 2
      </a>
      <a href="#" class="dropdown-item">
        Option 3
      </a>
    </div>
  </div>
</div>

</body>
1
getup8

ページの他の場所をクリックしてドロップダウンメニューを閉じる場合は、blurイベントも追加する必要があります。

$(document).ready(function () {
    $("#sortOrder").click(function () {
                $(".dropdown").toggleClass("is-active");
        });

    $("#sortOrder").blur(function () {
                $(".dropdown").removeClass("is-active");
    });}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet" />

<div class="dropdown is-right">
    <div class="dropdown-trigger">
        <button id="sortOrder" class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
            <span>Sort By</span>
            <span class="icon is-small">
                <i class="fas fa-angle-down" aria-hidden="true"></i>
            </span>
        </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu3" role="menu">
        <div class="dropdown-content">
            <a href="#" class="dropdown-item">
                New Designs
            </a>
            <a href="#" class="dropdown-item">
                Lowest Price
            </a>
            <a href="#" class="dropdown-item">
                Highest Price
            </a>
        </div>
    </div>
</div>
0
Naren