如何在JavaScript中将菜单重置为初始状态

我正在创建一个多状态菜单UI组件

这就是我希望发生的事情：

1） 点击化身按钮/链接 2） 从菜单中选择一个选项 3） 选择“用相机拍摄照片”选项，菜单应向右展开 4） 当我点击离开时，菜单消失，它再次折叠 5） 当我点击头像关闭菜单，然后打开它，它仍然在扩展模式；但我希望它再次倒塌

这就是我在标题中将菜单重置为初始状态的意思

这是一个代码笔（请注意，它在代码笔上看起来完全损坏了，显然它缺少图像，但您仍然可以看到其功能。（下面所有代码）

这里还有一个59秒的屏幕广播，显示了所需的结果：

HTML:

---

考虑此备选

avatarTrigger

块。 您应该调用

.hasClass（'something'）

而不是

.hasClass（'.something'）

。 您需要重置扩展类和折叠类，而不是只重置一个

avatarTrigger.on('click', function(){
      photoMenuCont.fadeToggle('700' , 'linear');
      if(menu.hasClass('photo-menu-expanded')) {
            menu.toggleClass('photo-menu-collapsed photo-menu-expanded');
      }
      return false;
});

---

你真是太棒了！谢谢你工作得很完美，方法只是简单的修改。太棒了！

$(document).ready(function() {

var photoMenuCont = $('#photoMenuCont'),
    menu = $('#photoMenu'),
    noPhoto = $('#noPhoto'),
    takePhoto = $('#takePhoto'),
    uploadPhoto = $('#uploadPhoto'),
    cameraTrigger = $('#cameraTrigger'),
    rightCol = $("#rightCol"),
    leftCol = $('#leftCol'),
    avatarTrigger = $('#avatarTrigger');

    takePhoto.on('click', function(){
      menu.toggleClass('photo-menu-collapsed photo-menu-expanded');
    });

    avatarTrigger.on('click', function(){
      photoMenuCont.fadeToggle('700' , 'linear');
      if($(document).hasClass('.photo-menu-expanded')) {
        removeClass('photo-menu-expanded');
      }
      return false;
    });

});

avatarTrigger.on('click', function(){
      photoMenuCont.fadeToggle('700' , 'linear');
      if(menu.hasClass('photo-menu-expanded')) {
            menu.toggleClass('photo-menu-collapsed photo-menu-expanded');
      }
      return false;
});