javascript - 显示和隐藏 javascript 函数的问题

Question

我的显示隐藏功能发生了特殊情况， 这是我的代码:

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"的展开/折叠框。

现在提问。

该功能有效，它会展开和折叠。但是，当我单击按钮展开前两次时，它不会执行任何操作，然后它将打开、关闭，然后当它下次打开时，它会丢失按钮，因此我无法再显示和隐藏我的切换类。

谁能解释一下为什么当我点击它的前几次时它没有打开，然后你能解释一下为什么按钮消失了，最后如果你能帮助我解决这个问题，你会让我的一天变得更有值(value)!

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;。难道不是更好的解决方案吗？ :)