向列表元素添加一個按鈕，該按鈕在單擊時顯示剩余元素

Question

我有一個包含 5 個列表項的列表。 第二個列表項在文本之后有一個按鈕。 單擊按鈕時，應顯示剩余的列表項。 但目前，其余項目顯示為子列表，這不是我的目標。 我希望其余項目成為主列表的一部分。 這是列表當前的樣子：

這是代碼：

<strong><span style="font-weight: bolder;">Level 1</span></strong><br />
My list:
<ul>
    <li>Element 1</li>
    <li>Element 2<button id="button">Button Text</button>
    <div id="infodiv" style="display:none;">
    <ul>
        <li>Element 3</li>
        <li>Element 4.</li>
        <li>Element 5</li>
    </ul>
    </div>
    </li>
</ul>

任何線索表示贊賞。

謝謝。

Answer 1

您的項目顯示為子列表，因為您在頂部列表中有一個ul元素。 如果您希望所有列表項都顯示為單個列表，請刪除 2 ul ，如下所示：

<strong><span style="font-weight: bolder;">Level 1</span></strong><br />
My list:
<ul>
    <li>Element 1</li>
    <li>Element 2<button id="button">Button Text</button></li>
    <li class="showhide">Element 3</li>
    <li class="showhide">Element 4.</li>
    <li class="showhide">Element 5</li>
    </li>
</ul>

將一些li包裝在div中在語義上也不是很好。 最后，您需要一個按鈕的點擊事件處理程序（我假設您沒有使用任何前端框架，只是 Vanilla Javascript）：

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
        <strong><span style="font-weight: bolder;">Level 1</span></strong><br />
        My list:
        <ul>
                <li>Element 1</li>
                <li>Element 2<button id="button">Button Text</button></li>
                <li class="showhide">Element 3</li>
                <li class="showhide">Element 4.</li>
                <li class="showhide">Element 5</li>
                </li>
        </ul>

    <script>
        document.querySelector("button").onclick = function(event) {
            const lis = document.getElementsByClassName('showhide')
            for (const li of lis) {
                li.style.display = li.style.display === 'none' ? 'block' : 'none'
            }
        }
    </script>
</body>

</html>

Answer 2

這是一種做你想做的事情的方法：

<strong><span style="font-weight: bolder;">Level 1</span></strong><br />
My list:
<ul>
    <li>Element 1</li>
    <li>Element 2<button id="button">Button Text</button></li>
    <div id="infodiv" class="list-group-item" style="display:none;">
        <li>Element 3</li>
        <li>Element 4.</li>
        <li>Element 5</li>
    </div>
</ul>

Javascript：

$('#button').on('click',function(i, el){
        if($('#infodiv').is(':visible')){
        $('#infodiv').hide();
    }else{
        $('#infodiv').show();
    }
});

見JsFiddle

我們正在做的是顯示或隱藏您的#infodiv ，具體取決於它是否當前可見。 我們還更改了您的 html 以刪除您的子列表中的列表中沒有另一個項目符號列表。

向列表元素添加一個按鈕，該按鈕在單擊時顯示剩余元素

問題描述

2 個解決方案

解決方案1
1 2020-07-22 14:21:53

解決方案2
1 已采納 2020-07-22 14:26:48

向列表元素添加一個按鈕，該按鈕在單擊時顯示剩余元素

問題描述

2 個解決方案

解決方案1 1 2020-07-22 14:21:53

解決方案2 1 已采納 2020-07-22 14:26:48

解決方案1
1 2020-07-22 14:21:53

解決方案2
1 已采納 2020-07-22 14:26:48