Nevoie JS custom !!!

[miber]

Bun deci eu am facut js-ul de mai jos sa mearga global doar pentru elementele htm lcare au data-target, el este functional imi afiseaza cum doresc dropdown-ul.

Dar vreau ca acest js sa mearga doar pe button-ul .dropdown-toggle, adica sa se deschida/inchida doar dintru singur button, la mine merge si asa dar daca dau click oriunde altundeva in pagina cat si in meniul afisat el se inchide, iar eu nu doresc acest lucru am sa va dau codul meu js.

JS | Afiseaza codul

$(document).ready(function(e) {

	$('.dropdown-toggle').click(function (e) {
		var location = $(this).attr('data-target');
		$(location).on('show.bs.dropdown', function (e) {
			$(this).slideDown(650);
		});
		$(location).on('hide.bs.dropdown', function (e) {
			$(this).slideUp(650);
		});
	});
	$('.dropdown-toggle').click(function (e) {
		$(this).siblings().removeClass('open');
		$(this).toggleClass('open');
	});
	$(document).click(function() {
		$('.dropdown-toggle').removeClass('open'); //make all inactive
		$('.notifications').removeClass('open'); //make all inactive
	});
});

Uitati si codul html pentru dropdown.

HTML | Afiseaza codul

<!-- IF S_REGISTERED_USER -->
						<!--/ PROFILE -->
						<div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-4 col-lg-2 col-lg-offset-0">
							<div class="row">
								<div class="profile">
									<!-- EVENT navbar_header_username_prepend -->
									<!-- IF CURRENT_USER_AVATAR -->
									<!--/ AVATAR -->
									<div class="col-xs-2 col-sm-1 col-md-2 col-lg-3">
										<div class="row">
											<div class="avatar">{CURRENT_USER_AVATAR}</div>
										</div>
									</div>
									<!-- ENDIF -->
									
									<!--/ USERNAME -->
									<div class="<!-- IF CURRENT_USER_AVATAR -->col-xs-8 col-sm-10 col-md-8 col-lg-5<!-- ELSE -->col-xs-10 col-sm-10 col-md-10 col-lg-9<!-- ENDIF -->">
										<div class="row">
											<div class="username">{CURRENT_USERNAME_SIMPLE}</div>
										</div>
									</div>
									
									<!--/ DROPDOWN TOGGLE -->
									<div class="col-xs-2 col-sm-1 col-md-2 col-lg-4">
										<div class="row">
											<div class="dropdown">
												<button class="dropdown-toggle" data-toggle="dropdown" data-target=".dropdown-menu"></button>
											</div>
										</div>
									</div>

									<ul class="dropdown-menu">
										<!-- IF U_RESTORE_PERMISSIONS -->
										<li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li>
										<li class="separator"></li>
										<!-- ENDIF -->
										<!-- EVENT navbar_header_profile_list_before -->
										<li><a href="{U_PROFILE}" title="{L_PROFILE}">{L_PROFILE}</a></li>
										<li><a href="{U_USER_PROFILE}" title="{L_READ_PROFILE}">{L_READ_PROFILE}</a></li>
										<!-- EVENT navbar_header_profile_list_after -->
										<!-- IF S_DISPLAY_PM -->
										<li class="separator"></li>
										<li><a href="{U_PRIVATEMSGS}">{L_PRIVATE_MESSAGES} [<strong>{PRIVATE_MESSAGE_COUNT}</strong>]</a></li>
										<!-- ENDIF -->
										<!-- IF U_ACP or U_MCP -->
										<li class="separator"></li>
										<!-- IF U_ACP -->
										<li><a href="{U_ACP}" title="{L_ACP}">{L_ACP_SHORT}</a></li>
										<!-- ENDIF -->
										<!-- IF U_MCP -->
										<li><a href="{U_MCP}" title="{L_MCP}">{L_MCP_SHORT}</a></li>
										<!-- ENDIF -->
										<!-- ENDIF -->
										<!-- EVENT navbar_header_quick_links_before -->
										<!-- IF S_DISPLAY_SEARCH -->
										<li class="separator"></li>
										<!-- IF S_REGISTERED_USER -->
										<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
										<!-- ENDIF -->
										<!-- IF S_USER_LOGGED_IN -->
										<li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
										<!-- ENDIF -->
										<!-- IF S_LOAD_UNREADS -->
										<li><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a></li>
										<!-- ENDIF -->
										<li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
										<li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
										<!-- ENDIF -->
										<!-- EVENT navbar_header_quick_links_after -->
										<li class="separator"></li>
										<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
									</ul>

								</div>
							</div>
						</div>
						<!-- ENDIF -->

[IsTI37]

Code: Select all

$(location).click(function() {
		$('.dropdown-toggle').removeClass('open'); //make all inactive
		$('.notifications').removeClass('open'); //make all inactive

In loc de document pui location daca vrei ca doar acel buton sa inchida dropdown-ul.

[miber]

Code: Select all

$(location).click(function() {
		$('.dropdown-toggle').removeClass('open'); //make all inactive
		$('.notifications').removeClass('open'); //make all inactive

In loc de document pui location daca vrei ca doar acel buton sa inchida dropdown-ul.

codul pentru afisare meniu dropdown este acesta.

Code: Select all

$('.dropdown-toggle').click(function (e) {
		var location = $(this).attr('data-target');
		$(location).on('show.bs.dropdown', function (e) {
			$(this).slideDown(650);
		});
		$(location).on('hide.bs.dropdown', function (e) {
			$(this).slideUp(650);
		});
	});

[IsTI37]

Aa, location e in prima functie si e pentru informatii.

Code: Select all

$('.dropdown-toggle').click(function() {
      $('.dropdown-toggle').removeClass('open'); //make all inactive
      $('.notifications').removeClass('open'); //make all inactive

[miber]

Aa, location e in prima functie si e pentru informatii.

Code: Select all

$('.dropdown-toggle').click(function() {
      $('.dropdown-toggle').removeClass('open'); //make all inactive
      $('.notifications').removeClass('open'); //make all inactive

Functia aia .removeClass este doar pentru body adica imi adauga clasa .open pe .dropdown-toggle incat sa o stilizez cand meniu este deschis iar cand dau click pe document mi-o sterge eu vreau ca aceasta functie sa fie facuta pentru ce doresc eu.

Code: Select all

$('.dropdown-toggle').each(function (e) {
		$(this).click(function (e) {
			var location = $(this).attr('data-target'); // Imi ia tot ce este in atribut ex: data-target=".dropdown-menu"; <-- asta este facuta sa nu fac aceeasi functie pentru toate dropdown-urile pe care le voi avea, adica pe scurt este globala.
			$(location).on('show.bs.dropdown', function (e) {
				$(this).slideDown(650); // Cand se deschide meniul.
			});
			$(location).on('hide.bs.dropdown', function (e) {
				$(this).slideUp(650); // Cand se inchide meniul.
			});
		});
	});

eu vreau cand dau click oriunde altundeva pe document sa stea afisat meniu, sper ca m-am exprimat corect.