Я обновил ваш код, и теперь вы можете видеть все значения «Значение 1» - «Значение 6».
Я добавил CSS на .ss-main .ss-content.ss-open
, а также добавил js
Я надеюсь, что это поможет вам.
$(document).ready(function(){
$(".ss-multi-selected").click(function(){
$(this).closest('.content').css("max-height", "inherit");
});
});
window.onload=function(){
// BEGIN CODE, MULTIPLE SELECT DROPDOWNS
var my_MSD_object = new SlimSelect({
select: '#my_MSD',
closeOnSelect: false,
});
// END CODE, MULTIPLE SELECT DROPDOWNS
// BEGIN CODE, COLLAPSIBLE SECTIONS
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
}
else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
// END CODE, COLLAPSIBLE SECTIONS
};
/* BEGIN STYLE, COLLAPSIBLE SECTIONS */
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible::after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active::after {
content: "\2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.content:active {
overflow: visible;
}
/*css add below*/
.ss-main .ss-content.ss-open {
position: relative;
}
/* END STYLE, COLLAPSIBLE SECTIONS */
<html>
<head>
<!-- MULTIPLE SELECT DROPDOWNS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.css"></link>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button class="collapsible">My Collapsible Div</button>
<div class="content" style="z-index: 900;">
<select id="my_MSD" multiple>
<option value="value 1">Value 1</option>
<option value="value 2">Value 2</option>
<option value="value 3">Value 3</option>
<option value="value 4">Value 4</option>
<option value="value 5">Value 5</option>
<option value="value 6">Value 6</option>
</select>
Howdy<br>
Howdy<br>
Howdy<br>
Howdy<br>
Howdy<br>
Howdy<br>
<br>------------------------------------------------------------ <!-- NEED FIX WIDTH & SPACING ISSUES -->
</div>
<button class="collapsible">Another Collapsible Div</button>
<div class="content" style="z-index: 800;">
Howdy<br>
Howdy<br>
Howdy<br>
<br>------------------------------------------------------------ <!-- NEED FIX WIDTH & SPACING ISSUES -->
</div>
</body>
</html>
Когда класс нарушает SRP , пора провести рефакторинг.
Принцип единственной ответственности - это компьютерное программирование принцип, согласно которому каждый модуль или класс должен иметь ответственность за отдельную часть функций, предоставляемых программное обеспечение, и эта ответственность должна быть полностью заключена в класс. Все его услуги должны быть тесно связаны с этим ответственность
If your classes have broken one of following "rules", you should consider to refactor.
You are looking for SOLID, more detailed screencasts can be found here.
SRP: single responsibility principle, there should never be more than one reason for a class to change.
OCP: open closed principle, software entities (classes, modules, functions, etc.) should be open for extension but closed for modification.
LSP: liskov substitution principle, functions that use references to base classes must be able to use objects of derived classes without knowing it.
ISP: interface segregation principle, clients should not be forced to depend upon interfaces that they do not use.
DIP: dependency inversion principle:
high level modules should not depend upon low level modules. Both Должно зависеть от абстракций.
абстракции не должны зависеть от деталей. Детали должны зависеть от абстракций.
В C # мое практическое правило для классов: все, что превышает 500 строк, становится слишком длинным. Мне очень нравятся методы до 10 строк, и я думаю, что менее 20 вполне приемлемо. Я думаю, это действительно зависит от контекста.
Рефакторинг всякий раз, когда у вас есть возможность:
и т. д.
РЕДАКТИРОВАТЬ: Очевидно, что решение о рефакторинге должно учитывать время, потенциальную отдачу, другие обязанности и т. Д.
Я бы не сказал, что существует какое-то «практическое правило» для рефакторинга больших классов. Иногда класс действительно инкапсулирует много бизнес-логики и должен быть таким большим, как есть. Однако вы можете задать себе несколько вопросов:
(Предполагая, что вы пишете объектно-ориентированный код) Действительно ли мой код объектно-ориентирован? То есть соблюдается ли принцип единой ответственности (спасибо, Небаканезер)? Является ли этот класс вспомогательным? Если да, как я могу преобразовать его методы в более подходящие классы объектов?
Есть ли у меня надежная архитектура? То есть использую ли я абстракцию и наследование, а не заново изобретаю колесо в каждом классе? Вызывают ли перегруженные методы базовые методы должным образом?
Действительно ли мне нужен весь этот код? Можно ли реализовать некоторую логику с помощью xpath, лямбда-выражения или выражения, управляемые базой данных?
Является ли код расширяемым? Легко ли поддерживать? Была ли она хорошо продумана с самого начала, или мы всегда делаем небольшие патчи, чтобы попытаться исправить проблемы?
Я надеюсь, что это немного поможет; рефакторинг больших классов может быть трудным, но я думаю, что если вы начнете просматривать мои вопросы, вы можете довольно быстро обнаружить, что в вашем коде есть возможности для улучшения ... Я знаю, что обычно так и поступаю.
Особенно посмотрите на №1 - люди действительно часто создают множество вспомогательных классов повсюду, что очень антиобъектно ориентировано (на мой взгляд). Это другая тема, но вы можете захотеть увидеть, что действительно - принадлежит - к классу, который вы создали, и что может / должно быть где-то еще.
Как правило, если класс удобен в обслуживании и гибок, может не потребоваться его изменение. :)
Мое практическое правило касается методов, а не классов. Если я не могу видеть весь метод на экране, его нужно реорганизовать. Конечно, применимы традиционные запахи .
Рефакторинг - это не столько уменьшение количества LOC, хотя это и побочный эффект, но улучшение качества. В частности, вы хотите стараться следовать принципу DRY (Don't Repeat Yourself), насколько это возможно и разумно.
Я склонен смотреть на цикломатическую сложность каждого члена, а не на количество строк кода для всего класса.
Не позволяйте LOC быть вашим основным показателем. 50 строк мне кажутся очень маленькими. С 50-строчными файлами у вас будет недружественное количество файлов классов в решении. Ваша продуктивность будет снижаться из-за всей навигации, которую вы будете выполнять между файлами, и ваша IDE всегда будет завалена слишком большим количеством вкладок. Я лично пытаюсь сначала организовать классы в логические группы по пространству имен. По каждому классу я стараюсь делать код меньше и легче для чтения. Иногда файлы классов действительно становятся большими. Меня начинает тошнить, когда в файле класса более 2000 строк. Все, что меньше этого, я рассматриваю индивидуально.
Этот класс может быть кандидатом для упражнения рефакторинга «извлечь объект, который, по вашему мнению, там нет»?
Возможно, например, вы могли бы извлечь объект метода, который позволил бы вам преобразовать несколько из 50 строчных методов в члены извлеченного класса?
В качестве альтернативы, инкапсулируя некоторые из тех частных методов, которые содержат бизнес-логику, в новый объект, который взаимодействует с этим, может предоставить новый способ повторного использования либо этого объекта, либо извлеченного.
Одной строки достаточно, чтобы рассмотреть возможность рефакторинга. 40 методов на каждые 50 строк начинают кричать мне на ухо: «Я слишком сложен, здесь прячется еще один объект».