如何「顯示」列表，然後通過單擊按鈕「隱藏」列表？

Question

這就是我迄今爲止在HTML和jQuery方面所做的......在完美的世界中，「列表」將隱藏起來，一旦點擊「按鈕」就會顯示出來。點擊「隱藏」按鈕後，該列表將「隱藏」到原始狀態。

<ul class="list"> 
<li><a href="sleeping.html">Sleeping</a></li> 
<li>Running</li> 
<li>Playing with Pepper</li> 
<li>Swimming</li> 
<li>Lounging</li> 
</ul> 
<button>List</button> 

$("button").click(function() { 
if ($(".list").toggle().is(":visible")) { 
$("button").text("Show List"); 
} else { 
$("button").text("Hide List"); 
} 
}); 

Answer 1

$("button").click(function() { 
 
    if ($(".list").toggle().is(":hidden")) { 
 
    $("button").text("Show List"); 
 
    } else { 
 
    $("button").text("Hide List"); 
 
    } 
 
});

.list { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul class="list"> 
 
    <li><a href="sleeping.html">Sleeping</a> 
 
    </li> 
 
    <li>Running</li> 
 
    <li>Playing with Pepper</li> 
 
    <li>Swimming</li> 
 
    <li>Lounging</li> 
 
</ul> 
 
<button>Show List</button>

Answer 2

使用類和切換是：

$("button").on('click', function() { 
    $(".list").toggleClass('hidden'); 
    if ($(".list.hidden").length) { 
    $(this).text("Show List"); 
    } else { 
    $(this).text("Hide List"); 
    } 
}).text("Show List"); 

CSS：

.hidden { 
    display: none; 
} 

HTML

<ul class="list hidden"> 
    <li><a href="sleeping.html">Sleeping</a></li> 
    <li>Running</li> 
    <li>Playing with Pepper</li> 
    <li>Swimming</li> 
    <li>Lounging</li> 
</ul> 
<button>List</button>