0

Как заменить данный CSS циклом, добавляющим +20px padding к каждому следующему элементу в дереве li? необходим именно padding!

$(document).ready(function(){
    $("#admindivisionmenu li").each(function() {
	    if($(this).has("ul").length) {
		    $(this).prepend('<div class="admindivisionmenu-child admindivisionmenu-child-close"></div>');
		} else {
			$(this).find("a").first().addClass("admindivisionmenu-without-clild");
		}
    });
    $(".admindivisionmenu-child").click(function() {
	    
	    if($(this).hasClass('admindivisionmenu-child-close')) {
		    $(this).parent().find('ul').first().slideDown();
			$(this).removeClass('admindivisionmenu-child-close').addClass('admindivisionmenu-child-open');
	    } else {
		    $(this).parent().find('ul').slideUp();
			$(this).parent().find('div').removeClass('admindivisionmenu-child-open').addClass('admindivisionmenu-child-close');
	    }
	    
    });
   
});
.admin-division-menu > ul > li a.admindivisionmenu-without-clild {padding-left: 20px;}

.admin-division-menu > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 30px;}
.admin-division-menu > ul > li > ul > li .admindivisionmenu-child {margin-left: 30px;}

.admin-division-menu > ul > li > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 50px;}
.admin-division-menu > ul > li > ul > li > ul > li .admindivisionmenu-child {margin-left: 50px;}

.admin-division-menu > ul > li > ul > li > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 70px;}
.admin-division-menu > ul > li > ul > li > ul > li > ul > li .admindivisionmenu-child {margin-left: 70px;}

.admin-division-menu > ul > li > ul > li > ul > li > ul > li > ul > li a.admindivisionmenu-without-clild {padding-left: 90px;}
.admin-division-menu > ul > li > ul > li > ul > li > ul > li > ul > li .admindivisionmenu-child {margin-left: 90px;}
<div class="admin-division-menu" id="admindivisionmenu"><ul><li><a href="?divisionid=1">Раздел 1</a><ul><li><a href="?divisionid=2">Раздел 2</a></li><li><a href="?divisionid=3">Раздел 3</a><ul><li><a href="?divisionid=4">Раздел 4</a><ul><li><a href="?divisionid=8">Раздел 8</a><ul><li><a href="?divisionid=9">Раздел 9</a></li></ul></li></ul></li></ul></li></ul></li><li><a href="?divisionid=5">Раздел 5</a></li><li><a href="?divisionid=6">Раздел 6</a></li><li><a href="?divisionid=7">Раздел 7</a></li></ul></div>

2
  • А что собственно не так и зачем такое понадобилось?
    – Qwertiy
    9 ноя 2016 в 7:19
  • border top должен быть у li во всю ширину!
    – lecherg
    9 ноя 2016 в 7:55

1 ответ 1

1

Так годится?

div {
  position: relative;
  float: left;
}

li:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid;
}
<div class="admin-division-menu" id="admindivisionmenu"><ul><li><a href="?divisionid=1">Раздел 1</a><ul><li><a href="?divisionid=2">Раздел 2</a></li><li><a href="?divisionid=3">Раздел 3</a><ul><li><a href="?divisionid=4">Раздел 4</a><ul><li><a href="?divisionid=8">Раздел 8</a><ul><li><a href="?divisionid=9">Раздел 9</a></li></ul></li></ul></li></ul></li></ul></li><li><a href="?divisionid=5">Раздел 5</a></li><li><a href="?divisionid=6">Раздел 6</a></li><li><a href="?divisionid=7">Раздел 7</a></li></ul></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.