Click dropdown + arrow проблема

162
10 декабря 2016, 10:30

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х) - именно с такой же стилистикой. Как сделать/исправить чтобы код работал корректно?

READ ALSO
Как при наведении на элемент заменить курсор картинкой?

Как при наведении на элемент заменить курсор картинкой?

Как можно при наведении на элемент заменить стандартный вид курсора картинкой?

182
jquery Как получить id div-ва

jquery Как получить id div-ва

Если в блоке ничего нет, то id успешно отлавливается, но если там что-нибудь есть - то и id не отлавливается:

198