рони,
у меня получилось сделать, то что нужно с помощью
открыть закрыть открывашка на js
но только теперь когда я из выпадающего списка выбираю длину, то название строчки не переноситься в название списка, и список не закрывается автоматически при нажатие на тег "li"
Вот весь код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Пример</title>
<meta name="robots" content="noindex,nofollow">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/animate.css" rel="stylesheet">
<!-- Google Font Lato -->
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="fonts/Raleway-ExtraLight.ttf" type="text/css">
<!-- Main Styles -->
<link href="css/styles.css" rel="stylesheet">
<link rel="shortcut icon" href="img/ico/favicon.png">
</head>
<body id="top" data-spy="scroll" data-target=".navbar" data-offset="260">
<!-- Vehicles start -->
<form action="#">
<section id="vehicles" class="container">
<div class="col-md-12">
<h2 class="title wow fadeInDown" data-wow-offset="200">Выбор стеллажа<span class="subtitle"></span></h2>
<div id="radio">
<div class="radio_pos">
<input checked="checked" class="radio" id="radio-1" name="sw" type="radio" value="one">
<label style="" for="radio-1">Односторонний</label>
<br><br>
<input style="" class="radio" id="radio-2" name="sw" type="radio">
<label style="" for="radio-2">Двухсторонний</label>
</div>
</div>
</div>
<!-- Vehicle 1str start -->
<div id="one" class="row">
<div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
<div id="vehicle-nav-container">
<div id="length" class="wrapper-dropdown-3" tabindex="1">
<span>Длина</span>
<ul class="vehicle-nav">
<input id="1str1metr" type="radio" class="lenght" value="one" name="length" checked="checked">
<label for="1str1metr">
<li class="active">
<a onclick="_click(1); return false;"><i class="icon-envelope icon-large"></i>1 метр</a>
</li>
</label>
<input id="1str2metra" type="radio" class="lenght" value="one" name="length">
<label for="1str2metra">
<li class="active">
<a onclick="_click(2); return false;"><i class="icon-envelope icon-large"></i>2 метра</a>
</li>
</label>
<input id="1str3metra" type="radio" class="lenght" value="one" name="length">
<label for="1str2metra">
<li class="active">
<a onclick="_click(3); return false;"><i class="icon-envelope icon-large"></i>3 метра</a>
</li>
</label>
</ul>
</div>
</div>
</div>
<!-- Vehicle 1str end -->
<script type="text/javascript">
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.vehicle-nav > .op input[type="radio"] + label li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
$('.wrapper-dropdown-3').removeClass('active');
obj.index = opt.index();
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#length') );
var dd = new DropDown( $('#metr') );
$(document).click(function() {
// all dropdowns
$('<div class="wrapper-dropdown-3"></div>').removeClass('active');
});
});
$(document).ready(function(){
$('input[name=sw]').click(function(){
var v = ($(this).val());
console.log(v);
if(v === 'one'){
$('#one').show();
$('#two').hide();
}
else{
$('#one').hide();
$('#two').show();
}
});
});
var _click = function () {
var b = 1;
return function (c) {
var a = document.getElementById("vehicle-" + b);
c == b && (a.style.display = "none" == a.style.display ? "" : "none");
c != b && (a.style.display = "none", a = document.getElementById("vehicle-" + c), a.style.display = "", b = c)
}
}();
window.onload = function() {
_click(1)
}
</script>
Сам список выпадающий строки 46-66, а код js для него 02-41.
