Добавьте div ниже другого div

0

У меня есть требование добавить 5 разделов один за другим при каждом нажатии кнопки div. (новый div должен быть добавлен ниже существующего div). Я сделал код, но новостные привязаны к вершине существующего div. пожалуйста, помогите исправить это. У меня есть еще одна кнопка, которая удаляет добавленные divs один за другим (новые, которые нужно удалить первым), вот мой код.

  <div class="clearFix"></div>
     <div id="containershowmore" >
        <div id="dragbtnmore" style="cursor: default;">Show more buttons</div>
        <div id="dragbtnless" style="cursor: default;">Show Fewer buttons</div>
    </div>

 <div class="toAdd" style="display:none;" >
                <div id="dragdashboardmain" style="cursor: pointer;">dash</div></div>
    <div class="toAdd" style="display:none;" >
        <div id="dragrcalendar" style="cursor: pointer;">Calendar</div></div>
    <div class="toAdd" style="display:none;">
        <div id="dragresourcelist" style="cursor: pointer;">Rlist</div></div>
    <div class="toAdd" style="display:none;">
        <div id="dragdailynotes" style="cursor: pointer;">D Notes</div></div>
    <div class="toAdd" style="display:none;">
        <div id="dragweeklynotes" style="cursor: pointer;">W Notes</div></div>

сценарий:

$("#dragbtnmore").click(function () {
        $('.toAdd').each(function () {
            if ($(this).css('display') == 'none') {
                $(this).css('display', 'block');
                return false;
            }
        });
        var i = 0;
        $('.toAdd').each(function () {
            if ($(this).css('display') != 'none') {
                i++;
            }
        });
        if (i == 5)
            $('#dragbtnmore').click(function () { return false; });
    });
    $("#dragbtnless").click(function () {
        $('.toAdd').each(function () {
            if ($(this).css('display') == 'block') {
                $(this).css('display', 'none');
                return false;
            }
        });
        var i = 0;
        $('.toAdd').each(function () {
            if ($(this).css('display') != 'block') {
                i++;
            }
        });
        if (i == 5)
            $('#dragbtnless').click(function () { return false; });
        $('#dragbtnless').click(function () { return true; });
    });

    $("#containershowmore").mouseleave(function () {
        $(this).hide();
    });
    function showmore() {
        document.getElementById('containershowmore').style.display = "block";
    }

стиль:

#containershowmore
{
    margin-top: -75px;position: relative;margin-left: 160px;background-color: #b1dafb;z-index: 1;
width: 125px;
float: right;
padding-left: 5px;
}

.toAdd
{

background-color: blue;
margin-top: -55px;
position: relative;
margin-bottom: 14px;

}

* Я назвал этот скрипт *

** Решение: Спасибо, Шивам Чопра за помощь. Благодаря тонну!! :)

для других, HEre - это решение **

jsfiddle.net/coolshivster/YvE5F/12
  • 1
    создайте скрипку пожалуйста
  • 0
    @Mohsen jsfiddle.net/SFRgz Я ссылался на эту скрипку, пожалуйста, проверьте ее
Показать ещё 2 комментария

1 ответ

1
Лучший ответ

Удалите верхнюю границу поля как из div.

   #containershowmore
{
position: relative;margin-left: 160px;background-color: #b1dafb;z-index: 1;
width: 125px;
    float:right;
padding-left: 5px;
}
#dragbtnmore{
    margin-bottom:10px;
    border:1px solid black;
}

.toAdd
{
height:20px;
    width:70px;
background-color: blue;
position: relative;
margin-bottom: 14px;

}

Затем он будет работать соответствующим образом. Здесь код: http://jsfiddle.net/coolshivster/YvE5F/

Я переписал ваш код в соответствии с вашим требованием. Некоторое объяснение кода

  • Я создал родительский элемент div с id = "Add-element", который охватывает каждый элемент, содержащий класс.toAdd.
  • Затем я создал атрибут данных для каждого div, содержащего класс.toAdd.
  • Теперь я показываю элемент один за другим. Но после первого элемента. Каждый другой элемент будет добавляться в родительский div, т.е. # Add-element class.

Теперь, код, который я переписал. jsfiddle ссылка: http://jsfiddle.net/YvE5F/10/

  • 0
    Спасибо за то, что уделили время на создание скрипки Shivam Chopra :). Мне нужно, чтобы черта спустилась по мере добавления нового div. Вы можете помочь мне в этом?
  • 0
    мне нужно, чтобы верхняя часть поля была частью дизайна. что-нибудь еще можно сделать?
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню