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

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

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

以下是四个分区框中的一个：

<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>   

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

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

---

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

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

仔细想想，你会找到答案的

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

另外，将CSS更改为

.boxes .content {
  display: none;
}

---

它们都不起作用，但我确实像你说的那样将其更改为类，并将保持这种方式，但它仍然不起作用。你正在显示.content div，但每个列表项都被隐藏。。。您的代码中有许多错误。请提供一把小提琴，我很乐意帮忙。这是我用所有东西做的小提琴，以防我错过了一些相关的东西：非常感谢。我现在清楚地看到了我犯的一些错误。解释得很清楚。我真的很感激。

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

.boxes .content {
  display: none;
}