Question

我试图设计一个可扩展的目录。以下CSS + HTML在单击文本部分时显示隐藏的列表项：

CSS：

#droplist, .show {display: none; }  
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #droplist { display:block; }

HTML：

<div style="padding-left:40px">
<a href="#">1. Stuff</a><a href="#" class="hide"> [+]</a> <a href="#" class="show">[-]</a>
    <ul id="droplist" style="margin-top: 4px">
        <li><a href="#">1.1 Object 1</a></li>
        <li><a href="#Lnk">1.2 Object 2</a></li>
    </ul>
</div>

但是，此列表仅限于单个嵌套；如果要从对象2进一步扩展，则需要添加其他填充。

下面的代码无法调用下拉列表：

<ul>
<li><a href="#">1. Stuff</a><a href="#" class="hide"> [+]</a> <a href="#" class="show">[-]</a></li>
    <ul id="droplist" style="margin-top: 4px">
        <li><a href="#">1.1 Object 1</a></li>
        <li><a href="#Lnk">1.2 Object 2</a></li>
    </ul>
</ul>

如何在保持“按钮”功能的同时保持列表格式？ JSFiddle：http://jsfiddle.net/N79nP/463/

感谢您的帮助。

Answer 1

在您的代码中，将li的第一个标签ul放在列表的末尾，如下所示。它将解决您的问题。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
ul {list-style: none;}
li {display: block}

#droplist, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #droplist { display:block; }

.hide {text-decoration: none;}
.show {text-decoration: none;}
</style>
</head>
<body>

<div style="padding-left:40px">
<a href="#">1. Stuff</a><a href="#" class="hide"> [+]</a> <a href="#" class="show">[-]</a>
    <ul id="droplist" style="margin-top: 4px">
        <li><a href="#">1.1 Object 1</a></li>
        <li><a href="#Lnk">1.2 Object 2</a></li>
    </ul>
</div>

<ul>
<li><a href="#">1. Stuff</a><a href="#" class="hide"> [+]</a> <a href="#" class="show">[-]</a>
    <ul id="droplist" style="margin-top: 4px">
        <li><a href="#">1.1 Object 1</a></li>
        <li><a href="#Lnk">1.2 Object 2</a></li>
    </ul>
</li>
</ul>

</body>
</html>

编辑：以下代码适用于网状列表。

ul {list-style: none;}
li {display: block;}

.droplist, .hide {display: none;}

.submenu:focus-within>.hide{display: inline;}
.submenu:focus-within>.show{display: none;}
.submenu:focus-within>.droplist{display: block;}
		
.hide:focus~.droplist{display: none;}
.hide:focus+.show{display: inline;}
.hide:focus{display: none !important;}
		
.hide, .show{text-decoration: none;}

<html>
<body>
<ul>
    <li class="submenu">
        <a href="#">1. Item 1</a>
        <a href="#" class="hide">[-]</a> 
        <a href="#" class="show">[+]</a>
        <ul class="droplist">
            <li>
                <a href="#">1.1 subitem 1</a>
            </li>
            <li class="submenu">
                <a href="#">1.2 subitem 2</a>
                <a href="#" class="hide">[-]</a>
                <a href="#" class="show">[+]</a>
                <ul class="droplist">
                    <li class="submenu">
                        <a href="#">1.2.1 sub-subitem 1</a>
                        <a href="#" class="hide">[-]</a> 
                        <a href="#" class="show">[+]</a>
                        <ul class="droplist">
                            <li>
                                <a href="#">1.2.1.1 sub-sub-subitem 1</a>
                            </li>
                            <li class="submenu">
                                <a href="#Lnk">1.2.1.2 sub-sub-subitem 2</a>
                                <a href="#" class="hide">[-]</a>
                                <a href="#" class="show">[+]</a>
                                <ul class="droplist">
                                    <li>
                                        <a href="#">1.2.1.2.1 sub-sub-sub-subitem 1</a>
                                    </li>
                                    <li>
                                        <a href="#">1.2.1.2.2 sub-sub-sub-subitem 2</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">1.2.2 sub-subitem 2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>

Answer 2

尝试遵循CSS

.show {display: none; }
#droplist {display:none}
.hide:focus + .show {display: inline; }
.show:focus { display: none; }
.hide:focus ~ #droplist { display:inline; }
.show:focus + .hide {display: none; }

Answer 3

功能齐全的可扩展嵌套目录，无需回收JavaScript或CSS： http://jsfiddle.net/qszpx1v7/188/ 编辑：代码现在支持多个目录

HTML

    <ul><a href="#" style="color:blue">Content</a>
  <button id="aa1" class="tdropbtn" onclick="Tgl(this.id)" style="display:inline;">[+]</button>
  <button id="paa1" class="tdropbtn" onclick="Tgl(this.id)" style="display:none;">[-]</button>

  <div id="lvlaa1" class="tdropdown-content">
    <li><a href="#home">1. Home</a></li>
    <li><a href="#about">2. About</a></li>
    <li><a href="#contact">3. Contact</a>
      <button id="aa2" class="tdropbtn" onclick="Tgl(this.id)" style="display:inline;">[+]</button>
      <button id="paa2" class="tdropbtn" onclick="Tgl(this.id)" style="display:none;">[-]</button></li>

    <div id="lvlaa2" class="tdropdown-content">
      <li><a href="#home">3.1 Home</a></li>
      <li><a href="#about">3.2 About</a></li>
      <li><a href="#contact">3.3 Contact</a>
        <button id="aa3" class="tdropbtn" onclick="Tgl(this.id)" style="display:inline;">[+]</button>
        <button id="paa3" class="tdropbtn" onclick="Tgl(this.id)" style="display:none;">[-]</button></li>

      <div id="lvlaa3" class="tdropdown-content">
        <li><a href="#home">3.1 Home</a></li>
        <li><a href="#about">3.2 About</a></li>
        <li><a href="#contact">3.3 Contact</a></li>
      </div>

    </div>
  </div>
</ul>
<ul><a href="#" style="color:blue">Content</a>
  <button id="ab1" class="tdropbtn" onclick="Tgl(this.id)" style="display:inline;">[+]</button>
  <button id="pab1" class="tdropbtn" onclick="Tgl(this.id)" style="display:none;">[-]</button>

  <div id="lvlab1" class="tdropdown-content">
    <li><a href="#home">1. Home</a></li>
    <li><a href="#about">2. About</a></li>
    <li><a href="#contact">3. Contact</a>
      <button id="ab2" class="tdropbtn" onclick="Tgl(this.id)" style="display:inline;">[+]</button>
      <button id="pab2" class="tdropbtn" onclick="Tgl(this.id)" style="display:none;">[-]</button></li>

    <div id="lvlab2" class="tdropdown-content">
      <li><a href="#home">3.1 Home</a></li>
      <li><a href="#about">3.2 About</a></li>
      <li><a href="#contact">3.3 Contact</a></li>
  </div>

CSS

ul {padding-left: 10px;}

li {display: block;padding-left: 25px; padding-top: 2px;}

.dropbtn {background-color: white; color: blue; padding-left: 8px; 
font-size: 16px; border: none; cursor: pointer;}

.dropdown-content {display: none; position: relative; background-color: white;
  min-width: 160px; overflow: none;}

.dropdown-content a {color: blue; padding: 2px 0px; display: inline;}

.show {display: block;}

JavaScript

    function Tgl(click_id) {
var x = document.getElementById(click_id);
var z = click_id.match(/\d+/)[0];
var y = click_id.slice(-3);
var w = document.getElementById(y);
var t = document.getElementById(`p${y}`);

/* If [+] is visible, make it invisible and display [-] - and vice versa*/
if (click_id.indexOf('p') >= 0) {
  if (x.style.display === "none") {
    x.style.display = "inline";
    w.style.display = "none";
  }
  if (x.style.display === "inline") {
    x.style.display = "none";
    w.style.display = "inline";
  }
} else {
  if (x.style.display === "none") {
    x.style.display = "inline";
    t.style.display = "none";
  }
  if (x.style.display === "inline") {
    x.style.display = "none";
    t.style.display = "inline";
  }
}
/*Toggle dropdown display onclick*/
document.getElementById(`lvl${y}`).classList.toggle("tshow");
/*Increment list spacing with each nest*/
var p = document.getElementById(`lvl${y}`);
p.style.left = (9 * z) + 'px';
}

带按钮的可扩展目录

3 个答案: