使用jquery将div按钮动画化为更大的菜单

我试着制作一个菜单按钮，当你点击它时，它会变大，并且使用jquery在其中包含菜单项，但由于某种原因，它会消失，这是我使用的jquery，这是我遇到问题的页面

billischill.ddns.net/testroom.php

$(document).on("click", "#addtomsg", function(){
    $('#addtomsg').addClass('open');
})

这是我的风格

#addtomsg.open{
    width: 80px;
    height: 80px;
   }
#addtomsg p{
    margin-top:3px;
   }
#addtomsg{
    position: fixed;
    float: left;
    margin-left:30px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border:none;
    width: 40px;
    height:20px;
    background:#006666;
   }

这是我的html

</div>

<form name="message" id="fixedinput"action="">
<div name="addtomsg" id="addtomsg">
  <center>
  <p>+<p>
  </center>
</div>
    <input name="usermsg" type="text" id="usermsg" size="73"class="textinpt" />
    <input name="submitmsg" type="submit"  id="submitmsg" value="Send" class="submit2"/>
</form>
</div>

+

---

有人能帮我一下吗

你的代码就是这样独立运行的。如果您在控制台上没有错误，并且正确地导入了jQuery，那么除非您共享整个过程，否则我们无法真正判断出问题所在

如果您想让它像您在评论中所说的那样可切换，请将您的

addClass

替换为

toggleClass

，它将为您提供所需的结果

$(document).on("click", "#addtomsg", function(){
    $('#addtomsg').toggleClass('open');
})

$（“#addtomsg”）。单击（函数（）{
$（this.toggleClass（'open'）；
})

#addtomsg.open{
宽度：80px；
高度：80px；
}
#addtomsg p{
利润上限：3倍；
}
#addtomsg{
位置：固定；
浮动：左；
左边距：30px；
边框左上半径：10px；
边框左下半径：10px；
边界：无；
宽度：40px；
高度：20px；
背景#006666；
}

+

也许这会有帮助

 <script>
    $(document).on("click", "#addtomsg", function(){
        $('#addtomsg').addClass('open');
    })
    </script>
<style>
#addtomsg.open{
    width: 80px;
    height: 80px;
   }
#addtomsg p{
    margin-top:3px;
   }
#addtomsg{
    position: fixed;
    float: left;
    margin-left:30px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border:none;
    width: 40px;
    height:20px;
    background:#006666;
   }
</style>

    <div id="addtomsg">
      hi
    </div>

$（文档）。在（“单击”上，“#添加tomsg”，函数（）{
$（'#addtomsg'）。addClass（'open'）；
})
#addtomsg.open{
宽度：80px；
高度：80px；
}
#addtomsg p{
利润上限：3倍；
}
#addtomsg{
位置：固定；
浮动：左；
左边距：30px；
边框左上半径：10px；
边框左下半径：10px；
边界：无；
宽度：40px；
高度：20px；
背景#006666；
}
你好

---

我在jquery方面还不是最优秀的，但它确实很有用。

在这里发布你的html对我有用->效果很好。您在控制台中是否有任何错误？很抱歉，我的网站似乎不起作用不，我没有收到任何错误。。。我能不能也把它整理一下