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

想要在按钮上显示的列表单击不同的div框

1 个答案: