Question

我有一个这样的菜单页面，在该页面上php生成一个从数据库获取的列表。这是this

的样子

我只是找不到适合此处的简单列表样式，也无法弄清楚如何仅显示标题，但是当我单击它时，其余信息就会出现。请告诉我，如何才能做到美观。预先谢谢你！

我尝试了这个，但这不是我想要的：

    body {
    font-family: Helvetica;
}

ol {
    counter-reset: myCounter;
    margin-left: 0;
    padding-left: 5px;
    color: rgb(100, 100, 100);
    display: inline-block;
}

li {
    position: relative;
    padding-left: 3em;
    margin: 0.45em 0;
    list-style: none;
    line-height: 1.8em;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

li:hover {
    color: rgb(0, 0, 0);
}

li:before {
    content: counter(myCounter);
    counter-increment: myCounter;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    padding: 0px;
    color: #fff;
    background: #2980b9;
    font-weight: bold;
    text-align: center;
    border-radius: .9em;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

li:hover:before {
    background-color: #2ecc71;
}

li li:before {
    background-color: #3498db;
}

li:after {
    position: absolute;
    top: 2.1em;
    left: 0.9em;
    width: 2px;
    height: calc(100% - 2em);
    content: '';
    background-color: rgb(203, 203, 203);
    z-index: 0;
}

li:hover:after {
    background-color: #2ecc71;
}

li li {
    font-size: 0.8em;
}

1 \ 2：

<!DOCTYPE html>
<html>
<head>
    <title>Films</title>
    <link href="css/button.css" rel="stylesheet">
    <?php require 'menu.php'; ?>
</head>
<body>
<button type="button"><a href="allFilmsASC.php">Sort by ASC</a></button>
<?php require 'allFilms.php'; ?>
</body>
</html>

2 \ 2：

<link href="css/index.css" rel="stylesheet">
<ul style="margin-top: 100px">
    <?php

    require 'queries.php';

    $query = new Queries();

    $films = $query->getAllFilms();

    foreach ($films as $film) {
        echo "<li style='margin-left: 50px;>Title: {$film['name']}</>";

        echo "      <ul>
                        <li>Year: {$film['year']}</li>
                        <li>Format: {$film['format']}</li>
                        <li>Actors: {$film['actors']}</li>
                    </ul>
              </li>";
    }
    ?>
</ul>

我想做这样的事情：IMAGE

生成的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Films</title>
    <link href="css/button.css" rel="stylesheet">
    <link href="css/menu.css" rel="stylesheet">
<nav role='navigation' class="menu">
    <ul>
        <li><a href="index.php">All Films</a></li>
        <li><a href="#">Tools</a>
            <ul>
                <li><a href="addFilm.php">Add Film</a></li>
                <li><a href="deleteFilm.php">Delete Film</a></li>
            </ul>
        </li>
        <li><a href="findBy.php">Search</a></li>
        <li><a href="">Import Films</a></li>
    </ul>
</nav></head>
<body>
<button type="button"><a href="allFilmsASC.php">Sort by ASC</a></button>
<link href="css/index.css" rel="stylesheet">
<ul style="margin-top: 100px">
    <li style='margin-left: 50px;>Title: First2</>      <ul>
                        <li>Year: 2223</li>
                        <li>Format: VHS</li>
                        <li>Actors: I and other</li>
                    </ul>
              </li><li style='margin-left: 50px;>Title: First2</>      <ul>
                        <li>Year: 2223</li>
                        <li>Format: VHS</li>
                        <li>Actors: I and other</li>
                    </ul>
              </li><li style='margin-left: 50px;>Title: Second</>      <ul>
                        <li>Year: 2019</li>
                        <li>Format: DVD</li>
                        <li>Actors: I</li>
                    </ul>
              </li><li style='margin-left: 50px;>Title: Second.0</>      <ul>
                        <li>Year: 2019</li>
                        <li>Format: DVD</li>
                        <li>Actors: I.0</li>
                    </ul>
              </li><li style='margin-left: 50px;>Title: Second.1</>      <ul>
                        <li>Year: 2019</li>
                        <li>Format: DVD</li>
                        <li>Actors: I.1</li>
                    </ul>
              </li><li style='margin-left: 50px;>Title: Second.2</>      <ul>
                        <li>Year: 2019</li>
                        <li>Format: DVD</li>
                        <li>Actors: I.2</li>
                    </ul>

Answer 1

没有Java语言就无法显示和隐藏函数。

JavaScript告诉您的浏览器该怎么做。 CSS仅用于样式设置。

要实现您想要的目标，您需要将两者结合起来。

这里是一个示例：https://stackoverflow.com/a/35409945/2286743

Answer 2

您可以使用包含href的{{1}}链接以及后面要扩展的元素的ID来完成此操作

结合<li class="movie" id="movie6"><a href="#movie6" class="title">Title: Second.2</a> <ul> <li>Year: 2019</li> <li>Format: DVD</li> <li>Actors: I.2</li> </ul> </li> CSS伪类

:target

.movie:target {
  height: 6em;
}

.movie-list {
  list-style: none;
  padding: 0;
}

.movie {
  height: 1em;
  overflow: hidden;
  margin-bottom: 8px;
  transition: height 0.5s;
}

.title {
  font-weight: bold;
  cursor: pointer;
  color: black;
  text-decoration: none;
}

li {
  line-height: 1.5em;
}

.movie:target {
  height: 6em;
}

li ul {
  padding: 8px;
}

但是，您发布的生成的HTML代码无效。有一个style属性没有结束引号，并且有一个没有名称的结束标签，并且没有关闭任何标签。

Answer 3

您遇到多个错误，最好先学习在https://validator.w3.org/nu/上验证HTML

在这里是可单击的纯CSS可折叠树菜单的示例，您需要创建<label for="cXX">和<input type="checkbox" id="cXX">并将cXX的每一项设置为相同的值。

ul,li{padding:0}
#menutree li{list-style:none}
#menutree > li{margin-left:5px;color:#8a2be2;font-weight:700;position:relative}
#menutree>li:before{content:"+";padding-right:5px}
#menutree>li>ul>li{margin-left:20px;color:green;font-weight:400}
#menutree>li>ul>li:before{content:"-";padding-right:5px}
li .menu_label + input[type="checkbox"]{position:absolute;left:0;opacity:0;cursor:pointer;top:0}
li .menu_label{cursor:pointer}
li .menu_label+input[type=checkbox]+ul>li{display:none}
li .menu_label+input[type=checkbox]:checked+ul>li{display:block}

<ul id="menutree">
  <li>
    <label class="menu_label" for="c1">Title: First2</label>
    <input type="checkbox" id="c1" />
    <ul>
      <li>Year: 2223</li>
      <li>Format: VHS</li>
      <li>Actors: I and other</li>
    </ul>
  </li>
  <li>
    <label class="menu_label" for="c2">Title: Second</label>
    <input type="checkbox" id="c2" />
    <ul>
      <li>Year: 2019</li>
      <li>Format: DVD</li>
      <li>Actors: I</li>
    </ul>
  </li>
  <li>
    <label class="menu_label" for="c3">Title: Second.0</label>
    <input type="checkbox" id="c3" />
    <ul>
      <li>Year: 2019</li>
      <li>Format: DVD</li>
      <li>Actors: I.0</li>
    </ul>
  </li>
</ul>

带有CSS的样式列表，仅包含js和其他样式

3 个答案: