Question

我已经将我的页面布置成了一个＆＃34;导航＆＃34;页面，包含跨越页面的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，#menutoggler内的contactdiv上的点击工具也会与#menutoggler内的aboutdiv上的点击工具一起执行（抱歉）如果我没有正确解释的话）

你应该做的是根据“任务”编写单独的点击处理程序

点击contactdiv，portfoliodiv，aboutdiv
切换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条件。

为什么jquery click事件（hide / show）仅对单击的第一个元素正常工作

1 个答案: