Рефакторинг jQuery повторяющийся узор

Question

Я нарисовал свое «я» в углу, чтобы быстро прототип. Каков наилучший способ рефакторинга следующего кода jQuery? Его функциональность заключается в переключении между некоторыми элементами навигации боковой панели. Мне нужно, чтобы он был более динамичным, чтобы быть масштабируемым.

Не могли бы вы добавить идентификаторы внутри операторов 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>

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>