Я стремлюсь создать расширяемое оглавление. Следующий 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/

Помощь приветствуется.

1
OverLordGoldDragon 21 Авг 2018 в 08:32

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';
}
1
OverLordGoldDragon 22 Авг 2018 в 22:33

В своем коде поместите тег 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>
1
Nayan Patel 22 Авг 2018 в 05:39

Попробуйте следовать 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; }
0
Laura Landuyt 21 Авг 2018 в 06:21
51942158