我正在创建一个多状态菜单UI组件。
这就是我想要发生的事情：
1）点击头像按钮/链接 2）从菜单中选择一个选项 3）选择“使用相机拍照”选项，菜单应向右展开 4）当我点击时，菜单消失，它再次崩溃 5）当我点击头像关闭菜单然后再打开它时它仍然处于扩展模式;但我希望它再次崩溃。
我的意思是将菜单重置为标题中的初始状态。
这是一个codepen http://codepen.io/MARS/pen/MYGRdo（注意它看起来完全在codepen上被破坏，显然它缺少图像，但你仍然可以看到它的功能。（以下所有代码）
此外还有一个59秒的截屏视频，显示了所需的结果： https://www.youtube.com/watch?v=j2qtNv1Osig
HTML：
<div class="child-profile-wrapper">
<div class="child-profile-container">
<div id="photoMenuCont" class="add-photo-container">
<div id="photoMenu" class="photo-menu photo-menu-collapsed">
<div class="photo-menu-left-col">
<h4>Add Photo</h4>
<span class="photo-menu-divider"></span>
<ul class="photo-menu-fields">
<li><a id="noPhoto" href="#"><span class="menu-initials">BR</span>Initials (no photo)</a></li>
<span class="photo-menu-divider"></span>
<li><a id="takePhoto" href="#"><span class="menu-camera"></span>Take photo with camera</a></li>
<span class="photo-menu-divider"></span>
<li><a id="uploadPhoto" href="#"><span class="menu-upload"></span>Upload a picture</a></li>
</ul>
</div>
<div class="photo-menu-right-col">
<h6>Please press the button to access your camera</h6>
<a id="cameraTrigger" class="user-camera-button" href="#"><span class="menu-camera-icon"></span><span class="camera-button-text">Use my camera!</span></a>
</div>
</div>
<span class="arrow-left"></span>
</div>
<div id="leftCol" class="child-profile-left-col">
<div id="initialAvatar" class="avatar-container">
<a id="avatarTrigger" href="#" class="avatar boy"><span class="avatar-photo-link">+Add Photo</span><span class="avatar-update-link"></span></span></a>
</div>
<div class="child-profile-row">
<ul class="child-profile-fields half print-font">
<li>
<span class="child-profile-label">Enrollment Status</span>
</li>
<li>
<a href="#">Active</a>
</li>
<li>
<span class="child-profile-label">Start Date</span>
</li>
<li>
<span class="child-profile-content">Aug 20, 2012</span>
</li>
<li>
<span class="child-profile-label">Grade</span>
</li>
<li>
<span class="child-profile-content">Pre-Kinder</span>
</li>
<li>
<span class="child-profile-label">School</span>
</li>
<li>
<span class="child-profile-content">Fair Lakes Children Center</span>
</li>
<li>
<span class="child-profile-label">Photos Authorized?</span>
</li>
<li>
<span>TOGGLE</span>
</li>
</ul>
</div>
</div>
<div id="rightCol" class="child-profile-right-col">
<div class="child-profile-row border">
<ul class="child-profile-fields thirds lrg-font">
<li>
<span class="child-profile-label">First Name</span>
<span class="child-profile-content">Bam Bam</span>
</li>
<li>
<span class="child-profile-label">Middle Name</span>
<span class="child-profile-content">Crush</span>
</li>
<li>
<span class="child-profile-label">Last Name</span>
<span class="child-profile-content">Rubble</span>
</li>
</ul>
</div>
<div class="child-profile-row border">
<ul class="child-profile-fields thirds md-font">
<li>
<span class="child-profile-label">D.O.B</span>
<span class="child-profile-content">April 23, 2012</span>
</li>
<li>
<span class="child-profile-label">Sex</span>
<span class="child-profile-content">Male</span>
</li>
<li>
<span class="child-profile-label">Nickname</span>
<span class="child-profile-content">Flint</span>
</li>
</ul>
</div>
<div class="child-profile-row border">
<ul class="child-profile-fields thirds sml-font">
<li>
<span class="child-profile-label">Identity Document Number</span>
<span class="child-profile-content">AW-1235465878</span>
</li>
<li>
<span class="child-profile-label">Identity Document Type</span>
<span class="child-profile-content">U.S. Passport</span>
</li>
<li>
<span class="child-profile-label">Document Date Issued</span>
<span class="child-profile-content">May 5, 2013</span>
</li>
</ul>
</div>
<div class="child-profile-row">
<div class="child-profile-notes-row">
<span class="child-profile-label">Notes</span>
<a href="#" class="btn-launch-skypad">Launch SkyPad</a>
</div>
<ul class="child-profile-fields full print-font">
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare, est eget fringilla auctor, diam ante ultrices turpis, ac congue sapien eros a turpis. Morbi quis pellentesque purus. Proin suscipit, ipsum et ornare euismod, est risus imperdiet augue, sit amet semper dolor velit in metus. In tempor, arcu vitae eleifend gravida, sapien dolor ultrices nisl.</p>
</li>
</ul>
<ul class="notes-container">
<li><a href="#" class="notes-item">
<h3>Subject Line</h3>
<span class="notes-divider"></span>
<span class="notes-date">Wednesday Feb 18, 2015</span>
</a></li>
<li><a href="#" class="notes-item">
<h3>Subject Line</h3>
<span class="notes-divider"></span>
<span class="notes-date">Wednesday Feb 18, 2015</span>
</a></li>
</ul>
</div>
</div>
<div class="child-profile-bottom-border"></div>
</div>
</div>
JS：
$(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;
});
});
答案 0 :(得分：1)
考虑这个替代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;
});