顯示和隱藏javascript函數的問題

Question

我的show hide函數發生一種特殊情況，這是我的代碼：

function expandedFunction(e) {
        var $content = $(".expanded").hide();
        $(".stylistbutton").on("click", function(e){
            $(this).toggleClass("expanded");
            $content.toggle();
        });
}

這段代碼是號召性用語：

<div>
    <table>
    <tr><td width="15%">
    </td><td width="55%">

    <label for="advanced">Advanced Settings?</label></td><td width="15%">
<input class="stylistbutton" type="button" onClick="expandedFunction(event)" value="+">

    </td><td width="15%">
    </td></tr>
    </table>
</div>

然后，我的class展開/折疊框為“ expanded”。

現在問這個問題。

該功能有效，它將擴展和折疊。 但是，當我單擊按鈕前兩次將其展開時，它什么也不做，它將打開，關閉，然后在下次打開時丟失了按鈕，因此我無法再顯示和隱藏切換的類。

誰能解釋為什么當我第一次單擊它時它沒有打開，然后您可以解釋一下為什么按鈕消失了，最后，如果您可以幫助我解決問題，那將使我的一天更加值得！

Answer 1

HTML：

<div>
    <table>
    <tr><td width="15%">
    </td><td width="55%">

    <label for="advanced">Advanced Settings?</label></td><td width="15%">
<input class="stylistbutton" type="button" value="+">

    </td><td width="15%">
    </td></tr>
    </table>
</div>

jQuery的：

$(document).ready(function(){
  $(".stylistbutton").click(function(){
    $(".expanded").toggle();
  });
});

並記住將expanded類樣式設置為display: none; 一開始。 這不是更好的解決方案嗎？ :)