b272

Помощь с JS и HTML

Рекомендованные сообщения

Вем привет. Хочу сделать выдвигающейся меню по кнопке, а в нутри его радио-кнопки. Таких блоков с выдвижным меню, я хочу создать несколько. Но при открытии второго или третьего блока, открывается 1. Выдвижное меню работает через JS.  Помогите поправить. 

JS:

$('.toggle').click(function(e) {
e.preventDefault();
 
var $this = $(this);
 
if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.next().slideUp(350);
} else {
$this.parent().parent().find('li .inner').removeClass('show');
$this.parent().parent().find('li .inner').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
}
});
 
$('.type_body_active').slideDown( "slow", function() {});
$('input[name=select]').click(function(){
$('.type_body_active').slideUp("slow", function() {});
$('.type_body_active').on('removeClass','type_body_active');
$(this).closest('.type').find('.type_body').addClass('type_body_active');
$('.type_body_active').slideDown( "slow", function() {});
$('.type #price').text('Select entry & days');
})
 
$('[name ^= days]').change(function(){
$(this).closest('.row').find('[name ^= entry]').prop('checked', true);
$('.type #price').text('$' + $(this).val());
})
 
$('[name ^= entry]').change(function(){
$('[name ^= days]').prop('checked', false);
$('#price').text('Select days');
})
///////////////////////
html:
<section class="type">
            <div class="type_title">
                <div class="left-cor">
                   <div class="row type_body_row">
                    <div class="radio-label">
                        <input type="radio" name="entry1" value="1" id="single1">
                        <label for="single1">Multiple entry</label>
                    </div>
                    <span>30 days</span>
                    <div class="radio-column">
                        <div class="radio-label">
                            <input type="radio" name="days1" value="510" id="tdays1">
                            <label for="tdays1">2 days</label>
                        </div>
                        <div class="radio-label">
                            <input type="radio" name="days1" value="400" id="fdays1">
                            <label for="fdays1">4 days</label>
                        </div>
                        <div class="radio-label">
                            <input type="radio" name="days1" value="280" id="twdays1">
                            <label for="twdays1">12 days</label>
                        </div>
                    </div>
                    <div class="col type_body_col">
                        <span>$510</span>
                        <span>$400</span>
                        <span>$280</span>
                    </div>
                </div>
                <br>
                <div class="row type_body_row" style="height: 123px;">
                    <span style="color: #b2181e; padding-left: 60px;"><b>4 business day processing selected</b> </span>
                    <span style=" padding-left: 60px;">Total price: </span>
                    <h3 id="price"><b>Select entry &amp; days</b></h3>
                    <button id="lab">CONTINUE</button>
                </div>
           </div>
        </div>

<section >

<section class="type">
            <div class="type_title">
                <div class="left-cor">
                   <div class="row type_body_row">
                    <div class="radio-label">
                        <input type="radio" name="entry1" value="1" id="single1">
                        <label for="single1">Multiple entry</label>
                    </div>
                    <span>30 days</span>
                    <div class="radio-column">
                        <div class="radio-label">
                            <input type="radio" name="days1" value="510" id="tdays1">
                            <label for="tdays1">2 days</label>
                        </div>
                        <div class="radio-label">
                            <input type="radio" name="days1" value="400" id="fdays1">
                            <label for="fdays1">4 days</label>
                        </div>
                        <div class="radio-label">
                            <input type="radio" name="days1" value="280" id="twdays1">
                            <label for="twdays1">12 days</label>
                        </div>
                    </div>
                    <div class="col type_body_col">
                        <span>$510</span>
                        <span>$400</span>
                        <span>$280</span>
                    </div>
                </div>
                <br>
                <div class="row type_body_row" style="height: 123px;">
                    <span style="color: #b2181e; padding-left: 60px;"><b>4 business day processing selected</b> </span>
                    <span style=" padding-left: 60px;">Total price: </span>
                    <h3 id="price"><b>Select entry &amp; days</b></h3>
                    <button id="lab">CONTINUE</button>
                </div>
           </div>
        </div>
<section >

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Вижу как минимум <section> вместо </section>
По скриншоту дебажить очень трудно, хорошо бы код закинуть куда-нибудь на playcode.io и добавить отступы в JS.
Да и пустые функции, которые ничего не делают, лёгкости чтению не придают.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Статистика пользователей

    46 176
    Всего пользователей
    3 128
    Рекорд онлайна
    argotel
    Новый пользователь
    argotel
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.



  • Спрашивают сейчас

  • Пишут сейчас

    • Здравствуйте, предлагаем наши услуги хостинга с защитой от DDOS и без защиты
      Мы рады предложить Вам наш хостинг argotel.ru
      Стабильность, качество, виртуальное гостеприимство – это наш конек. Используем гибкие условия, для максимального комфорта – мощные серверные процессоры, SSD диски, защита от DDOS.
      Мы предоставляем тестовый период, есть возможность moneyback.
      Подберем тарифы индивидуально под каждого, выделим IP любого количества.
      Базовое администрирование бесплатно, для каждого клиента! Защищенные тарифные планы:
      Тариф Минимальный: 1 x (2.6 GHz*), RAM 512 МБ, SSD 10 ГБ, защита от DDOS - 390 руб/м
      Тариф Стандарт: 2 x (2.6 GHz*), RAM 1024 МБ, SSD 15 ГБ, защита от DDOS - 459 руб/м
      Тариф Стандарт+: 3 x (2.6 GHz*), RAM 2048 МБ, SSD 30 ГБ, защита от DDOS - 710 руб/м
      Мощные тарифы с защитой от DDOS:
      Тариф MAX1: 4 x (2.60 GHz*), RAM 4 ГБ, SSD 120 ГБ, защита от DDOS - 1850 руб/м
      Тариф MAX2: 6 x (2.60 GHz*), RAM 6 ГБ, SSD 180 ГБ, защита от DDOS - 2499 руб/м
      Тариф MAX3: 8 x (2.60 GHz*), RAM 10 ГБ, SSD 240 ГБ, защита от DDOS - 3799 руб/м Незащищенные тарифные планы:
      Тариф Меркурий: 2 x (2.7 GHz*) , RAM 1024 МБ , SSD 30 ГБ - 349 руб/м
      Тариф Марс: 3 x (2.7 GHz*) , RAM 3072 МБ , SSD 40 ГБ - 600 руб/м
      Тариф Юпитер: 4 x (2.7 GHz*) , RAM 8192 МБ , SSD 50 ГБ - 950 руб/м
      Ссылка на тарифную сетку: прямая ссылка на тарифы Подойдет под прокси, VPN, парсинг и другие приложения. Размещение в Москве, но будете приятно удивлены сюрпризом для прокси и VPN.
      Кроме этого, дарим скидку 50% на любой сервер VPS/VDS, на первый месяц для новых клиентов.[
      Промокод: ARGOTEL-NEW Промо-акция оплати сервер VDS/VPS за 6 месяцев, получи + 6 месяцев в подарок.
      Улучшили связность в СНГ на тарифах: Меркурий, Марс, Юпитер. По необходимости, можно добавить большие подсети на сервера /24-/21
      Принимаем: Без. расчет , Яндекс, Webmoney, BTC, Paypal, Qiwi , Visa-Mastercard-Мир. Email: info@argotel.ru, Telegram: @infosaleargotel
      Сайт: https://argotel.ru
    • Если это сайт не какой-то существующей компании, у которой уже есть логотип, а сайт сам в себе, или же компания создаётся вместе с сайтом, то, мне кажется, цвета сайта ни под что можно не подгонять, а наоборот подогнать логотип под сайт. Добавить логотип в вёрстку — это же не проблема, если только у него не окажутся совсем странные размеры, типа 500x20, а там уже место под меню размечено.
    • когда начинаете тащить свой блок внутри родителя вы должны знать: координаты блока (top,left) и размеры блока (width,height) и родителя (parent_width,parent_height)
      зная эти данные вы можете вычислить left+width<=parent_width и top+height<=parent_height
      а также left>=0 и top>=0
      если left или top меньше 0, то принудительно выставляете его в 0
      аналогично для параметров больше parent_width  и parent_height
  • Лучшие авторы