javascript - 重构 jQuery 重复模式

Question

为了快速制作原型(prototype)，我把自己逼到了一个 Angular 落。重构以下 jQuery 代码的最佳方法是什么？它的功能是在一些侧边栏导航项之间切换。我需要它更加动态以便可扩展。

您会将 ID 添加到 if 语句内的数组中并迭代它们吗？使用变量？创建一个函数并在html端调用它onClick？不管我怎么想，它仍然会导致一堆重复的代码。

谢谢!

// TOGGLING LEFT NAVIGATION
   $('#settingsClick').click(function() {
      if( $('#addContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
         $('#addContainer').slideUp(350);
         $('#noteContainer').slideUp(350);
         $('#logoContainer').slideUp(350);
         $('#settingsContainer').slideDown(350);
         $('#themeContainer').slideUp(350);
      } else {
         $('#settingsContainer').slideToggle(350);
      }
   });

   $('#addClick').click(function() {
      if( $('#settingsContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible') ) {
         $('#settingsContainer').slideUp(350);
         $('#noteContainer').slideUp(350);
         $('#logoContainer').slideUp(350);
         $('#addContainer').slideDown(350);
         $('#themeContainer').slideUp(350);
      } else {
         $('#addContainer').slideToggle(350);
      }
   });

   $('#noteClick').click(function() {
      if( $('#settingsContainer, #addContainer, #logoContainer, #themeContainer').is(':visible') ) {
         $('#settingsContainer').slideUp(350);
         $('#addContainer').slideUp(350);
         $('#logoContainer').slideUp(350);
         $('#noteContainer').slideDown(350);
         $('#themeContainer').slideUp(350);
      } else {
         $('#noteContainer').slideToggle(350);
      }
   });

   $('#logoClick').click(function() {
      if( $('#settingsContainer, #addContainer, #noteContainer, #themeContainer').is(':visible') ) {
         $('#settingsContainer').slideUp(350);
         $('#addContainer').slideUp(350);
         $('#noteContainer').slideUp(350);
         $('#logoContainer').slideDown(350);
         $('#themeContainer').slideUp(350);
      } else {
         $('#logoContainer').slideToggle(350);
      }
   });

   $('#themeClick').click(function() {
      if( $('#settingsContainer, #addContainer, #noteContainer, #logoContainer').is(':visible') ) {
         $('#settingsContainer').slideUp(350);
         $('#addContainer').slideUp(350);
         $('#noteContainer').slideUp(350);
         $('#logoContainer').slideUp(350);
         $('#themeContainer').slideDown(350);
      } else {
         $('#themeContainer').slideToggle(350);
      }
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="settingsClick">Click Me</a><br>
<div id="settingsContainer">Content...</div>

<br><br>

<a id="addClick">Click Me</a><br>
<div id="addContainer">Content...</div>

<br><br>

<p> Etc... Etc....</p>

Answer 1

您应该使用通用 CSS 类进行分组，即 header 和 content。使用建立的关系，您可以定位其他内容持有者以及与当前单击的标题元素关联的内容。

$('.container .header').on('click', function() {
  //Get the current element
  var $this = $(this);

  //find the content
  var $content = $this.closest('.container').find('.content'); //$this.next()

  //get all contents
  var content = $('.container .content');

  //Slide up others 
  content.not($content).slideUp(350);

  //Slide down
  $content.slideToggle(350);
});

.content {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header" id="settingsClick">Click Me</div>
  <div class="content" id="settingsContainer">Content...</div>
</div>
<div class="container">
  <div class="header" id="addClick">Click Me</div>
  <div class="content" id="addContainer">Content...</div>
</div>
<div class="container">
  <div class="header" id="noteClick">Click Me</div>
  <div class="content" id="noteContainer">Content...</div>
</div>