javascript - 单击其他关闭按钮时显示下拉菜单，仅在单个元素上显示 Vanilla Javascript

Question

我是 javascript 的新手，仍在尝试了解事件和选择器的工作原理。

我有一个关闭按钮，单击它后，我希望根据单击的卡片弹出一个下拉菜单。

我想通过切换一个类来做到这一点，并且已经在该类上设置了样式。

我得到的错误如下:Uncaught TypeError: Cannot read property 'classList' of undefined;

如果我像往常一样使用事件处理程序，它会拉下所有下拉菜单，这不是我的目标。

我的代码如下:

HTML

    <section id="wrapper">
    <div class="headline">
        <span class="promoted-stories">Promoted stories</span>
        <span class="taboola-link"><a href="#">Sponsored Links by Taboola</a></span>
    </div>
    <div class="cards">
        <article class="card">
            <a class="overlay" href="#overlay-link"></a>
            <figure class="thumbnail">
                <img src="images/Couple.jpg" alt="3 Reasons Why You Haven't Found Your Match Yet">
                <a href="#" class="close"></a><!-- close button -->
                <ul>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                </ul>
            </figure>
            <div class="card-content">
                <h2 class="card-title">3 Reasons Why You Haven't Found Your Match Yet</h2>
                <p class="category">Dating life</p>
            </div><!-- .card-content -->
        </article><!-- .card -->
        <article class="card">
            <a class="overlay" href="#overlay-link"></a>
            <figure class="thumbnail">
                <img src="images/royals.jpg" alt="Harry And Meghan Announce Baby On The Way">
                <a href="#" class="close"></a><!-- close button -->
                <ul>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                </ul>
            </figure>
            <div class="card-content">
                <h2 class="card-title">Harry And Meghan Announce Baby On The Way</h2>
                <p class="category">Royals</p>
            </div><!-- .card-content -->
        </article><!-- .card -->
        <article class="card">
            <a class="overlay" href="#overlay-link"></a>
            <figure class="thumbnail">
                <img src="images/stage.jpg" alt="Things Get Seriously Real As RuPaul Cast Open Up">
                <a href="#" class="close"></a><!-- close button -->
                <ul>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                </ul>
            </figure>
            <div class="card-content">
                <h2 class="card-title">Things Get Seriously Real As RuPaul Cast Open Up</h2>
                <p class="category">Celebrities</p>
            </div><!-- .card-content -->
        </article><!-- .card -->
        <article class="card">
            <a class="overlay" href="#overlay-link"></a>
            <figure class="thumbnail">
                <img src="images/circus.jpg" alt="A Tiger Collapsed In A Russian Circus Mid-Show">
                <a href="#" class="close"></a><!-- close button -->
                <ul>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                </ul>
            </figure>
            <div class="card-content">
                <h2 class="card-title">A Tiger Collapsed In A Russian Circus Mid-Show</h2>
                <p class="category">Circus</p>
            </div><!-- .card-content -->
        </article><!-- .card -->
        <article class="card">
            <a class="overlay" href="#overlay-link"></a>
            <figure class="thumbnail">
                <img src="images/people.jpg" alt="Engagement On The Cards For Jack And Dani">
                <a href="#" class="close"></a><!-- close button -->
                <ul>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                </ul>
            </figure>
            <div class="card-content">
                <h2 class="card-title">Engagement On The Cards For Jack And Dani</h2>
                <p class="category">Dating life</p>
            </div><!-- .card-content -->
        </article><!-- .card -->
        <article class="card">
            <a class="overlay" href="#overlay-link"></a>
            <figure class="thumbnail">
                <img src="images/atwood.jpg" alt="Attwood Hits Back At Rumours Of Dani Dyer Fued">
                <a href="#" class="close"></a><!-- close button -->
                <ul>
                    <li>Menu</li>
                    <li>Menu</li>
                    <li>Menu</li>
                </ul>
            </figure>
            <div class="card-content">
                <h2 class="card-title">Attwood Hits Back At Rumours Of Dani Dyer Fued</h2>
                <p class="category">Gossip</p>
            </div><!-- .card-content -->
        </article><!-- .card -->
    </div>
</section>

CSS

<pre>* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

html {
    font-size: 100%;
    font-family: sans-serif;
    height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: #f8f8f8;
}

#wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 20px auto;
    padding: 20px;
    max-width: 880px;
    background: #fff;
    -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
}

.headline {
    padding: 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.headline .promoted-stories {
    font-weight: bold;
    color: #404040;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.headline .taboola-link a {
    font-weight: 300;
    line-height: normal;
    text-align: right;
    color: #888888;
    font-size: 11px;
}

.cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.card {
    display: block;
    min-height: 1px;
    margin: 1%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 31.33333333%;
    flex: 0 0 31.33333333%;
    -webkit-box-shadow: 0px 0px 1px -2px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 0px 1px -2px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
    -webkit-transition: all .25s;
    transition: all .25s;
    position: relative;
}

.card:hover {
    -webkit-transform: translate(0, -2px);
    transform: translate(0, -2px);
    -webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 3px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 3px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.card .thumbnail {
    display: block;
    height: 140px;
}

.card img {
    height: 100%;
    width: 100%;
    border: none;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

.card-content {
    padding: 5px 10px 25px;
}

.card .card-content .card-title {
    margin: 5px 0 0 0;
    overflow: hidden;
    color: #000;
    font-weight: bold;
    max-height: 72px;
    font-size: .875rem;
    line-height: 1.5rem;
    text-decoration: none;
}

.card .card-content .category {
    color: #999999;
    font-size: 11.0px;
    font-weight: bold;
    text-decoration: none;
    margin: 5px 0 0 0;
    overflow: hidden;
    max-height: 52px;
}

.close {
    position: absolute;
    right: 0px;
    width: 15px;
    top: 5px;
    height: 15px;
}

.close:before,
.close:after {
    position: absolute;
    left: 2px;
    right: 0;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: #fff;
}

.close:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.card a.close {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s, opacity 0.4s linear;
    transition: visibility 0s, opacity 0.4s linear;
}

.card:hover a.close {
    visibility: visible;
    opacity: 1;
}

/* Change the opacity of just the selected element */
.fade {
    opacity: .3;
}

@media only screen and (max-width: 768px) {
    .card {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
        flex: 0 0 48%;
    }
}

@media only screen and (max-width: 480px) {
    .card {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 98%;
        flex: 0 0 98%;
        margin: 2%;
    }

    .card .thumbnail {
        height: 170px;
    }
}
</pre>

Javascript

(function() {
            let closeButtons = Array.prototype.slice.call(document.querySelectorAll(".close"));
            closeButtons.forEach(function(button) {
                button.addEventListener("click", function(e) {
                    let elements = Array.prototype.slice.call(document.querySelectorAll('ul'));
                    elements.forEach(function(e) {
                        e.target.classList.toggle('show');
                    });
                });
            });
        })();

谁能告诉我我做错了什么，我该如何修复这个脚本才能实现我的最终目标？

不允许使用 jQuery。

Answer 1

如果您只想在与单击按钮相同的 figure 中切换 ul 试试这个:

button.addEventListener("click", function() {
  let figure = this.parentNode; // locate the figure element surrounding the clicked button
  let targetUL = figure.querySelector("ul"); // get its ul
  targetUL.classList.toggle("show");
});

可以压缩成

button.addEventListener("click", function() {
  this.parentNode.querySelector("ul").classList.toggle("show");
});