为什么 jquery 单击事件 (hide/show) 仅对单击的第一个元素有效

Question

我已将我的页面布局为一个 "navigation" 页面，该页面由 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 上的单击句柄一起执行（抱歉如果我没有正确解释）

您可能应该做的是根据 "task"

编写单独的点击处理程序

点击处理程序在 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 单击事件 (hide/show) 仅对单击的第一个元素有效

why does jquery click event (hide/show) only work properly for the first element clicked

javascript

jquery

click

show-hide