重構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類（即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> 

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>