希望列表显示在按钮单击不同的 div 框中

Question

我有 4 个内容不同但大小相同的 div 框。在这些框下方，我有一个按钮，当单击该按钮时，我希望所有 div 框显示 4 个不同的无序列表的内容。

这似乎是一个相当直接的问题，但我不确定我哪里出错了。

这是这四个 div 框之一：

<div class="boxes">
    <div class="col span-1-of-4 box box1">
        <h6>Summer Saver</h6>
        <h2><i class="ion-social-euro"></i>1595</h2>
        <p>Save <i class="ion-social-euro"></i>300</p>
        <h5>Until August 31</h5>
        <div class="content">
            <ul>
                <li>
                    <p>Lorem Ipsum</p>
                </li>
                <li>
                    <p>Lorem Ipsum</p>
                </li>
                <li>
                    <p>Lorem Ipsum</p>
                </li>
                <li>
                    <p>Lorem Ipsum</p>
                </li>
            </ul>
        </div>
        <div class="book-now">
            Book Now
        </div>
    </div>
</div>   

这里是按钮：

<button id="btnExpand" onclick="buttonText()"> Compare Benefits</button>

这是我的 javascript 文件中的所有内容：

$(document).ready(function() {
    $("#btnExpand").click(function() {
        $(".content").show();
    });
    $("#btnExpand").click(function() {
        $(".content").hide();
    });
});

就目前而言，这是我认为相关的框的唯一 css：

.boxes .content ul li {
  list-style: none;
  display: none;
}

我的想法是，我目前没有显示列表项，但是单击按钮会激活 div 以显示它们并再次单击它会激活它们再次隐藏。

Answer 1

主要问题是使用 css 时，您隐藏了每个列表项，但显示了容器。

有一个look at this fiddle，你会找到你的答案。

$(document).ready(function() {
  $("#btnExpand").on('click', function() {
    if ($(".boxes .content").is(':visible')) {
      $(".boxes .content").hide();
    } else {
      $(".boxes .content").show();
    }
  });
});

另外，将您的 CSS 更改为

.boxes .content {
  display: none;
}