jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
e(".sb-menu .sb-item.drop").removeClass("active")
e(".sb-menu .sb-item.drop2").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
.parents(".sb-menu").children(".sb-item.drop").addClass("active").addClass("active").parents(".sb-menu").children(".sb-item.drop2").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
.icon-arrow:before {
content: ' ';
position: relative;
display: inline-block;
width: 9px;
height: 7px;
background: url(http://i.imgur.com/WisDtM5.png);
transition: 0.3s all;
}
li {list-style-type: none;}
li.sb-item.drop.active {
background: #000;
border: 3px solid #5C5F67;
}
li.sb-item.drop2.active {
background: #000;
border: 3px solid #5C5F67;
}
ul li.sb-item {
background: #313640;
border-radius: 3px;
border: 3px solid #3C3F4A;
width:268px;
height:44px;
margin: 5px auto;
}
ul li.sb-item:hover {
background: #383E4A;
border: 3px solid #5C5F67;
}
ul li.sb-item i {
position: absolute;
margin-left:35px;
float:right;
}
li:nth-child(2) .sb-item_text {
margin-left:20px;
margin-top:10px;
float:left;
color:#fff;
font-size:18px;
}
.dropdown {
font-family: ProximaLight;
font-size:18px;
margin-top:10px;
padding: 0;
}
.dropdown li {
float: left;
list-style: none;
}
.dropdown .button-dropdown {
position: relative;
}
.dropdown li a {
font-family: ProximaLight;
color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.dropdown li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.dropdown li a.dropdown-toggle i {
padding: 3px;
margin-top: 3px;
}
.dropdown li a.dropdown-toggle.active i {
transform: rotate(180deg);
background: #2d2f37;
margin-top:4px;
}
.dropdown li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 25px;
text-align: left;
background:#000;
border: 1px solid #212830;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
z-index: 2;
}
.dropdown li .dropdown-menu.active {
display: block;
}
.dropdown li .dropdown-menu a {
width: 150px;
}
ul.dropdown-menu li.open-sb:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
ul.dropdown-menu li.open-sb:last-child {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.sent-balance ul.dropdown-menu li.open-sb {
background: #000;
width: 230px;
padding: 10px 20px;
border-bottom:1px solid #2A2E34;
font-family: ProximaLight;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sb-menu">
<li class="sb-item drop">
<ul class="dropdown">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Первый <i class="icon-arrow" style="left:199px;"></i>
</a>
<ul class="dropdown-menu">
<li class="open-sb">
<a href="#">
Сайт 1
</a>
</li>
<li class="open-sb">
<a href="#">
Сайт 1
</a>
</li>
<li class="open-sb">
<a href="#">
Сайт 1
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sb-item drop2">
<ul class="dropdown">
<li class="button-dropdown ">
<a href="javascript:void(0)" class="dropdown-toggle">
Второй <i class="icon-arrow" style="left:199px;"></i>
</a>
<ul class="dropdown-menu">
<li class="open-sb">
<a href="#">
Сайт 1
</a>
</li>
<li class="open-sb">
<a href="#">
Сайт 1
</a>
</li>
<li class="open-sb">
<a href="#">
Сайт 1
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
При клике на один из дропов - активным становится так же и соседний, так работать не должно. Dropdown работает не корректно - таких dropdown на странице несколько (около 3х) - именно с такой же стилистикой. Как сделать/исправить чтобы код работал корректно?
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Как можно при наведении на элемент заменить стандартный вид курсора картинкой?
Если в блоке ничего нет, то id успешно отлавливается, но если там что-нибудь есть - то и id не отлавливается: