为什么 jQuery 单击事件(隐藏/显示)只对单击的第一个元素正常工作

Question

我已经将我的页面布置为一个"导航"页面，该页面由跨越页面的 3 个div 组成，所有 33% 的高度。当您单击其中一个div 时，其他两个应该滑出，与您单击的div 有关的信息应该滑入它们的位置。这适用于单击的第一个元素，无论它是哪个元素。但是我单击的第二个总是在滑入时将元素包装到错误的行中。任何帮助将不胜感激。每个div 都有自己的点击事件，我在下面包含了 3 个事件之一。

$('#contactdiv').click(function(){
  $('#aboutdiv').hide('slide', {direction: 'right'}, 1000);
  $('#portfoliodiv').hide('slide', {direction: 'left'}, 1000);
  $('#contactinfo1').show('slide', {direction: 'left'}, 1000);
  $('#contactinfo2').show('slide', {direction: 'right'}, 1000);
  $('#menutoggler').show('pulsate');
  $('#menutoggler').click(function(){
    $('#contactinfo2').hide('slide', {direction: 'right'}, 1000, function(){
        $('#portfoliodiv').show('slide', {direction: 'left'}, 1000);
    });
    $('#contactinfo1').hide('slide', {direction: 'left'}, 1000, function(){
        $('#aboutdiv').show('slide', {direction: 'right'}, 1000);
    });
    $('#menutoggler').hide('pulsate');
});
});

Answer 1

我假设，您在所有(contactdiv，portfoliodiv，aboutdiv(点击处理程序中添加了以下代码。

$('#menutoggler').click(function(){})

因此，每次单击3个菜单div之一时，您都会在#menutoggler上添加一键处理程序。

假设您单击了contactdiv，然后单击aboutdiv。现在，如果您单击menutoggler，contactdiv内部#menutoggler上的单击句柄也将与aboutdiv内部#menutoggler上的单击句柄一起执行(对不起，如果我没有正确解释(

您可能应该做的是根据"任务"编写单独的点击处理程序

1. 单击contactdiv、portfoliodiv、aboutdiv 上的处理程序
2. 切换menutoggler

.HTML

<div id="contactdiv" class="menuItem"></div>
<div id="portfoliodiv" class="menuItem"></div>
<div id="aboutdiv" class="menuItem"></div>

.JS

var ids = ['contactdiv', 'portfoliodiv', 'aboutdiv'];
var activeMenu;
function hideOtherMenus(id) {
  var otherMenus = ids.filter(function(i) {
    return i !== id;
  });
  otherMenus.forEach(function(i) {
    // you probably need more if/else conditions if you want to set the correct direction
    $('#' + i).hide('slide', {direction: 'right'}, 1000);   
  });
}
function showInfo(id) {
  if(id === 'contactdiv') {
    ['contactinfo1', 'contactinfo2'].forEach(function(i) {
      // you probably need more if/else conditions if you want to set the correct direction
      $('#' + i).show('slide', {direction: 'right'}, 1000);     
    });
  }
  // do the same for portfolio and about
}

$('.menuItem').click(function(){
  activeMenu = this.id;
  hideOtherMenus(activeMenu);
  showInfo(activeMenu);
  $('#menutoggler').show('pulsate');
});
$('#menutoggler').click(function(){
  if (activeMenu === 'contactdiv') {
    $('#contactinfo2').hide('slide', {direction: 'right'}, 1000, function(){
        $('#portfoliodiv').show('slide', {direction: 'left'}, 1000);
    });
    $('#contactinfo1').hide('slide', {direction: 'left'}, 1000, function(){
        $('#aboutdiv').show('slide', {direction: 'right'}, 1000);
    });
  }
  // do the same for portfolio and about
  $('#menutoggler').hide('pulsate');
});

注意：如果您正确命名div，则可以更好地处理if/else条件。