重构 jQuery 重复模式

Question

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

你会在 if 语句中添加 ID，在一个数组中并遍历它们吗？使用变量？创建一个函数并在 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 class，即 header 和 content 进行分组。使用已建立的关系，您可以将其他内容持有者和与当前单击的 header 元素关联的内容作为目标。

$('.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>

Answer 2

最好的办法就是这样做

$(document).on('click', ".trigger", function() {
  var sibling_content = $(this).siblings(".content");
  if (!sibling_content.hasClass('active')) {
    $(".content").slideUp('slow').removeClass('active');
    sibling_content.slideDown('slow').addClass('active');
  } else {
    sibling_content.slideUp('slow').removeClass('active');
  }
})

.trigger {
  background-color: red;
  color: white;
  font-size: 16px;
}

.content {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 20px 0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="trigger">trigger</div>
  <div class="content">content</div>
</div>
<div class="container">
  <div class="trigger">trigger</div>
  <div class="content">content</div>
</div>
<div class="container">
  <div class="trigger">trigger</div>
  <div class="content">content</div>
</div>
<div class="container">
  <div class="trigger">trigger</div>
  <div class="content">content</div>
</div>

重构 jQuery 重复模式

Refactoring jQuery repeating pattern

javascript

navigation

jquery

refactoring

toggle