Создание активируемой по щелчку Строки таблицы

Question

Создание активируемой по щелчку Строки таблицы

В вашем коде есть две проблемы:

Вам нужно использовать menu--open вместо .menu--open внутри функции переключения списка классов
Вам нужно использовать [115 ] вместо menuButton.classList.toggle

//reference to the ".menu" class
const menu = document.querySelector('.menu');
console.log(menu)

const menuButton = document.querySelector('.menu-button')
// Using your menuButton reference, add a click handler that calls toggleMenu
console.log(menuButton);
menuButton.addEventListener("click", function() {
  menu.classList.toggle('menu-open');
});

.menu.menu-open {
  display: none;
}

<div class="header">
  <img class="menu-button" src="./assets/menu.png" />
  <h1>Lambda School Newsfeed</h1>
</div>
<div class="menu">
  <ul>
    <li>Students</li>
    <li>Faculty</li>
    <li>What's New</li>
    <li>Tech Trends</li>
    <li>Music</li>
    <li>Log Out</li>
  </ul>
</div>

27

javascript html

задан Michael Stum 13 October 2008 в 14:13

1 ответ

Другие вопросы по тегам:

javascript html

Похожие вопросы:

score 50 · Answer 1

Если Вы не хотите использовать JavaScript, можно сделать что Chris Porter, предложенный путем обертывания содержания каждого td элемента в соответствие тегам привязки. Затем установите теги привязки на display: block и набор height и line-height совпадать с высотой td. Необходимо затем найти, что касание td беспрепятственно и эффект - то, что целая строка активируема по щелчку. Не упустите дополнение на td, который вызовет разрывы в активируемой по щелчку области. Вместо этого примените дополнение к тегам привязки, поскольку оно явится частью активируемой по щелчку области, если Вы сделаете это.

Мне также нравится создавать строку, чтобы иметь эффект выделения путем применения другого цвета фона на tr:hover.

Пример

Для последней Начальной загрузки (версия 3.0.2) вот некоторый быстрый CSS, чтобы показать, как это может быть сделано:

table.row-clickable tbody tr td {
    padding: 0;
}

table.row-clickable tbody tr td a {
    display: block;
    padding: 8px;
}

Вот демонстрационная таблица для работы с:

<table class="table table-hover row-clickable">
    <tbody>
        <tr>
            <td><a href="#">Column 1</a></td>
            <td><a href="#">Column 2</a></td>
            <td><a href="#">Column 3</a></td>
        </tr>
    </tbody>
</table>

Вот пример, показывающий это в действии.