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;。这不是一个更好的解决方案吗？：）

show＆amp; amp;隐藏javascript功能

1 个答案: