如何“显示”列表，然后通过单击按钮“隐藏”列表？

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>