Question

查看show / hide div下拉链接。我找到了一笔我正在尝试做的事情。我希望当点击并打开另一个链接时，活动div会自动关闭。此时用户必须先关闭活动div，然后才能查看另一个。我是JS的新手，所以感谢任何帮助。

$(document).ready(function() {
  /* hide all content divs */
  $('.toggle-content').hide();

  $('.toggle-trigger').click(function() {
    /* if the clicked item is active*/
    if ($('.toggle-trigger').hasClass('active')) {
      /* hide the next content div*/
      $(this).next('.toggle-content').slideUp();
      /* and remove the active class*/
      $(this).toggleClass('active');
    }

    /* if the cliked item is NOT active */
    else {
      /* slide the content div dwon */
      $(this).next('.toggle-content').slideDown();
      /* and add the active class*/
      $(this).toggleClass('active');
    }
  });
});

$(document).ready(function() {

  $('div.dropdown').each(function() {
    var $dropdown = $(this);

    $("a.dropdown-link", $dropdown).click(function(e) {
      e.preventDefault();
      $div = $("div.dropdown-container", $dropdown);
      $div.toggle();
      $("div.dropdown-container").not($div).hide();
      return false;
    });
  });

  $('html').click(function() {
    $("div.dropdown-container").hide();
  });
});

Answer 1

点击一个点击时，你可以迭代所有其他点击并在活动时关闭它们：

$(document).ready(function() {
  /* hide all content divs */
  $('.toggle-content').hide();

  $('.toggle-trigger').click(function() {

    /* close all other taps but not current clicked tap */
    closeActiveTap(this);

    /* if the clicked item is active*/  
    if ($(this).hasClass('active')){
      /* hide the next content div*/
      $(this).next('.toggle-content').slideUp();
      /* and remove the active class*/
      $(this).toggleClass('active');
    } 

    /* if the cliked item is NOT active */
    else {
      /* slide the content div dwon */

      $(this).next('.toggle-content').slideDown();
      /* and add the active class*/ 
      $(this).toggleClass('active');

    }
  });

});

function closeActiveTap(current){

  $('.toggle-trigger').each(function(index,tap){
    if(current!==tap && $(tap).hasClass('active')){
      $(tap).removeClass('active');
      $(tap).next('.toggle-content').slideUp();
    }
  });

}

function closeActiveTap 接受一个参数当前（当前点击的点按）以确保在所有其他点击上应该应用DOM操作但不应用于当前点击，因为当到达if-else代码块时，无论如何都会处理当前的tap。

希望这有帮助

单击其他显示/隐藏div按钮时关闭活动div

1 个答案: