stopPropagation prevents bootstrap dropdown

I use jquery to hide and show sidebar, if I click outside or resize the sidebar hide, but I fall in a problem so all my dropdown are stopped because I use stopPropagation

My HTML is

$('#btn-menusb-l').click(function(e){

		e.stopPropagation();

		$('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

	});

	$('#sdbr-l').click(function(e){

		e.stopPropagation();

	});

	$('body,html').click(function(e){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

	$(window).resize(function(){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

.ly-bmk-header

{

   border:0;

   border-bottom:1px solid #bbb;

   margin:0 auto;

   height: 50px;

   position: relative;

   min-width: 360px;

   width: 100%;

   z-index: auto !important;

   padding: 0 10px

}



.hdr-table

{

	display: table;

	width: 100%;

}

.hdr-cell

{

	display: table-cell;

	vertical-align: middle;

}









.ly-bmk-layout

{

   display: table-row;

}



.ly-bmk-cell

{

   display: table-cell;

   vertical-align: top;

}





.ly-bmk-sidebar-l, .ly-bmk-sidebar-l-mob

{

   background: #FFFFFF;

   border-right:1px solid #A6A6A6;

   margin:0;

   width: 330px;

}



.ly-bmk-content

{

   margin:0 auto;

}



@media all and (max-width: 750px)

{

    .ly-bmk-sidebar-l

	{position:fixed;margin-left:-340px}

	.ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob

	{margin-left:0px;position:fixed;z-index:11111;overflow-y:auto;

	-webkit-transform: translate3d(0px, 0, 0);

	-moz-transform: translate3d(0, 0, 0);

	-o-transform: translate3d(0, 0, 0);

	-ms-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3s linear;

	-ms-transition: all 0.3s linear;

	-o-transition: all 0.3s linear;

	transition: all 0.3s linear;

	height: 100%;

  top: 0;

	}

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

		<div class="ly-bmk-sheet">

			<header class="ly-bmk-header">

				<div class="hdr-table">

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a href="#">Logo</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a id="btn-menusb-l" href="#">Sidebar</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon Header</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

							</ul>

						</nav>

					</div>

				</div>

			</header>

			<div class="ly-bmk-layout">

				<div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">

					

						<div class="ly-bmk-vmenu-content">

							<ul class="ly-bmk-vmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon SideBar</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

								<li><a href="#">Test</a></li>

							</ul>

						</div>

					</div>

				</div>

				<div class="ly-bmk-cell ly-bmk-content">

						<p>WELCOME</p>

				</div>

			</div>

</body>

I want to keep sidebar shown if I click inside but hide if I click outside, my jquery code working except it stop my dropdown from showing

Sidebar hide if width is less than 750px

sidebar in header to show the sidebar if width is less than 750px

dropdown inside sidebar not working but the one in header working

edited Nov 11 at 23:22

asked Nov 11 at 21:18

Bynd

191213

1

You didn't provide a working bootstrap example and therefore cannot ascertain if this is programmer error
– vol7ron
Nov 11 at 21:29

it's bootstrap dropdown
– Bynd
Nov 11 at 21:54

1

No, I added that code to a snippet with bootstrap and it did not render at all. It's incomplete. Though, an answer could be provided with the code given, I encourage you to provide a working example to make it easier for those answering the question
– vol7ron
Nov 11 at 21:58

I add all my code HTML CSS JAVASCRIPT, dropdown in header work but in sidebar not work if you click on sidebar on header will show sidebar
– Bynd
Nov 11 at 23:17

add a comment |

I use jquery to hide and show sidebar, if I click outside or resize the sidebar hide, but I fall in a problem so all my dropdown are stopped because I use stopPropagation

My HTML is

$('#btn-menusb-l').click(function(e){

		e.stopPropagation();

		$('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

	});

	$('#sdbr-l').click(function(e){

		e.stopPropagation();

	});

	$('body,html').click(function(e){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

	$(window).resize(function(){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

.ly-bmk-header

{

   border:0;

   border-bottom:1px solid #bbb;

   margin:0 auto;

   height: 50px;

   position: relative;

   min-width: 360px;

   width: 100%;

   z-index: auto !important;

   padding: 0 10px

}



.hdr-table

{

	display: table;

	width: 100%;

}

.hdr-cell

{

	display: table-cell;

	vertical-align: middle;

}









.ly-bmk-layout

{

   display: table-row;

}



.ly-bmk-cell

{

   display: table-cell;

   vertical-align: top;

}





.ly-bmk-sidebar-l, .ly-bmk-sidebar-l-mob

{

   background: #FFFFFF;

   border-right:1px solid #A6A6A6;

   margin:0;

   width: 330px;

}



.ly-bmk-content

{

   margin:0 auto;

}



@media all and (max-width: 750px)

{

    .ly-bmk-sidebar-l

	{position:fixed;margin-left:-340px}

	.ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob

	{margin-left:0px;position:fixed;z-index:11111;overflow-y:auto;

	-webkit-transform: translate3d(0px, 0, 0);

	-moz-transform: translate3d(0, 0, 0);

	-o-transform: translate3d(0, 0, 0);

	-ms-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3s linear;

	-ms-transition: all 0.3s linear;

	-o-transition: all 0.3s linear;

	transition: all 0.3s linear;

	height: 100%;

  top: 0;

	}

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

		<div class="ly-bmk-sheet">

			<header class="ly-bmk-header">

				<div class="hdr-table">

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a href="#">Logo</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a id="btn-menusb-l" href="#">Sidebar</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon Header</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

							</ul>

						</nav>

					</div>

				</div>

			</header>

			<div class="ly-bmk-layout">

				<div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">

					

						<div class="ly-bmk-vmenu-content">

							<ul class="ly-bmk-vmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon SideBar</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

								<li><a href="#">Test</a></li>

							</ul>

						</div>

					</div>

				</div>

				<div class="ly-bmk-cell ly-bmk-content">

						<p>WELCOME</p>

				</div>

			</div>

</body>

I want to keep sidebar shown if I click inside but hide if I click outside, my jquery code working except it stop my dropdown from showing

Sidebar hide if width is less than 750px

sidebar in header to show the sidebar if width is less than 750px

dropdown inside sidebar not working but the one in header working

edited Nov 11 at 23:22

asked Nov 11 at 21:18

Bynd

191213

1

You didn't provide a working bootstrap example and therefore cannot ascertain if this is programmer error
– vol7ron
Nov 11 at 21:29

it's bootstrap dropdown
– Bynd
Nov 11 at 21:54

1

No, I added that code to a snippet with bootstrap and it did not render at all. It's incomplete. Though, an answer could be provided with the code given, I encourage you to provide a working example to make it easier for those answering the question
– vol7ron
Nov 11 at 21:58

I add all my code HTML CSS JAVASCRIPT, dropdown in header work but in sidebar not work if you click on sidebar on header will show sidebar
– Bynd
Nov 11 at 23:17

add a comment |

I use jquery to hide and show sidebar, if I click outside or resize the sidebar hide, but I fall in a problem so all my dropdown are stopped because I use stopPropagation

My HTML is

$('#btn-menusb-l').click(function(e){

		e.stopPropagation();

		$('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

	});

	$('#sdbr-l').click(function(e){

		e.stopPropagation();

	});

	$('body,html').click(function(e){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

	$(window).resize(function(){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

.ly-bmk-header

{

   border:0;

   border-bottom:1px solid #bbb;

   margin:0 auto;

   height: 50px;

   position: relative;

   min-width: 360px;

   width: 100%;

   z-index: auto !important;

   padding: 0 10px

}



.hdr-table

{

	display: table;

	width: 100%;

}

.hdr-cell

{

	display: table-cell;

	vertical-align: middle;

}









.ly-bmk-layout

{

   display: table-row;

}



.ly-bmk-cell

{

   display: table-cell;

   vertical-align: top;

}





.ly-bmk-sidebar-l, .ly-bmk-sidebar-l-mob

{

   background: #FFFFFF;

   border-right:1px solid #A6A6A6;

   margin:0;

   width: 330px;

}



.ly-bmk-content

{

   margin:0 auto;

}



@media all and (max-width: 750px)

{

    .ly-bmk-sidebar-l

	{position:fixed;margin-left:-340px}

	.ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob

	{margin-left:0px;position:fixed;z-index:11111;overflow-y:auto;

	-webkit-transform: translate3d(0px, 0, 0);

	-moz-transform: translate3d(0, 0, 0);

	-o-transform: translate3d(0, 0, 0);

	-ms-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3s linear;

	-ms-transition: all 0.3s linear;

	-o-transition: all 0.3s linear;

	transition: all 0.3s linear;

	height: 100%;

  top: 0;

	}

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

		<div class="ly-bmk-sheet">

			<header class="ly-bmk-header">

				<div class="hdr-table">

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a href="#">Logo</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a id="btn-menusb-l" href="#">Sidebar</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon Header</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

							</ul>

						</nav>

					</div>

				</div>

			</header>

			<div class="ly-bmk-layout">

				<div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">

					

						<div class="ly-bmk-vmenu-content">

							<ul class="ly-bmk-vmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon SideBar</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

								<li><a href="#">Test</a></li>

							</ul>

						</div>

					</div>

				</div>

				<div class="ly-bmk-cell ly-bmk-content">

						<p>WELCOME</p>

				</div>

			</div>

</body>

I want to keep sidebar shown if I click inside but hide if I click outside, my jquery code working except it stop my dropdown from showing

Sidebar hide if width is less than 750px

sidebar in header to show the sidebar if width is less than 750px

dropdown inside sidebar not working but the one in header working

edited Nov 11 at 23:22

asked Nov 11 at 21:18

Bynd

191213

I use jquery to hide and show sidebar, if I click outside or resize the sidebar hide, but I fall in a problem so all my dropdown are stopped because I use stopPropagation

My HTML is

$('#btn-menusb-l').click(function(e){

		e.stopPropagation();

		$('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

	});

	$('#sdbr-l').click(function(e){

		e.stopPropagation();

	});

	$('body,html').click(function(e){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

	$(window).resize(function(){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

.ly-bmk-header

{

   border:0;

   border-bottom:1px solid #bbb;

   margin:0 auto;

   height: 50px;

   position: relative;

   min-width: 360px;

   width: 100%;

   z-index: auto !important;

   padding: 0 10px

}



.hdr-table

{

	display: table;

	width: 100%;

}

.hdr-cell

{

	display: table-cell;

	vertical-align: middle;

}









.ly-bmk-layout

{

   display: table-row;

}



.ly-bmk-cell

{

   display: table-cell;

   vertical-align: top;

}





.ly-bmk-sidebar-l, .ly-bmk-sidebar-l-mob

{

   background: #FFFFFF;

   border-right:1px solid #A6A6A6;

   margin:0;

   width: 330px;

}



.ly-bmk-content

{

   margin:0 auto;

}



@media all and (max-width: 750px)

{

    .ly-bmk-sidebar-l

	{position:fixed;margin-left:-340px}

	.ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob

	{margin-left:0px;position:fixed;z-index:11111;overflow-y:auto;

	-webkit-transform: translate3d(0px, 0, 0);

	-moz-transform: translate3d(0, 0, 0);

	-o-transform: translate3d(0, 0, 0);

	-ms-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3s linear;

	-ms-transition: all 0.3s linear;

	-o-transition: all 0.3s linear;

	transition: all 0.3s linear;

	height: 100%;

  top: 0;

	}

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

		<div class="ly-bmk-sheet">

			<header class="ly-bmk-header">

				<div class="hdr-table">

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a href="#">Logo</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a id="btn-menusb-l" href="#">Sidebar</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon Header</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

							</ul>

						</nav>

					</div>

				</div>

			</header>

			<div class="ly-bmk-layout">

				<div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">

					

						<div class="ly-bmk-vmenu-content">

							<ul class="ly-bmk-vmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon SideBar</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

								<li><a href="#">Test</a></li>

							</ul>

						</div>

					</div>

				</div>

				<div class="ly-bmk-cell ly-bmk-content">

						<p>WELCOME</p>

				</div>

			</div>

</body>

I want to keep sidebar shown if I click inside but hide if I click outside, my jquery code working except it stop my dropdown from showing

Sidebar hide if width is less than 750px

sidebar in header to show the sidebar if width is less than 750px

dropdown inside sidebar not working but the one in header working

$('#btn-menusb-l').click(function(e){

		e.stopPropagation();

		$('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

	});

	$('#sdbr-l').click(function(e){

		e.stopPropagation();

	});

	$('body,html').click(function(e){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

	$(window).resize(function(){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

.ly-bmk-header

{

   border:0;

   border-bottom:1px solid #bbb;

   margin:0 auto;

   height: 50px;

   position: relative;

   min-width: 360px;

   width: 100%;

   z-index: auto !important;

   padding: 0 10px

}



.hdr-table

{

	display: table;

	width: 100%;

}

.hdr-cell

{

	display: table-cell;

	vertical-align: middle;

}









.ly-bmk-layout

{

   display: table-row;

}



.ly-bmk-cell

{

   display: table-cell;

   vertical-align: top;

}





.ly-bmk-sidebar-l, .ly-bmk-sidebar-l-mob

{

   background: #FFFFFF;

   border-right:1px solid #A6A6A6;

   margin:0;

   width: 330px;

}



.ly-bmk-content

{

   margin:0 auto;

}



@media all and (max-width: 750px)

{

    .ly-bmk-sidebar-l

	{position:fixed;margin-left:-340px}

	.ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob

	{margin-left:0px;position:fixed;z-index:11111;overflow-y:auto;

	-webkit-transform: translate3d(0px, 0, 0);

	-moz-transform: translate3d(0, 0, 0);

	-o-transform: translate3d(0, 0, 0);

	-ms-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3s linear;

	-ms-transition: all 0.3s linear;

	-o-transition: all 0.3s linear;

	transition: all 0.3s linear;

	height: 100%;

  top: 0;

	}

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

		<div class="ly-bmk-sheet">

			<header class="ly-bmk-header">

				<div class="hdr-table">

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a href="#">Logo</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a id="btn-menusb-l" href="#">Sidebar</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon Header</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

							</ul>

						</nav>

					</div>

				</div>

			</header>

			<div class="ly-bmk-layout">

				<div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">

					

						<div class="ly-bmk-vmenu-content">

							<ul class="ly-bmk-vmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon SideBar</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

								<li><a href="#">Test</a></li>

							</ul>

						</div>

					</div>

				</div>

				<div class="ly-bmk-cell ly-bmk-content">

						<p>WELCOME</p>

				</div>

			</div>

</body>

$('#btn-menusb-l').click(function(e){

		e.stopPropagation();

		$('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

	});

	$('#sdbr-l').click(function(e){

		e.stopPropagation();

	});

	$('body,html').click(function(e){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

	$(window).resize(function(){

		$('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

	});

.ly-bmk-header

{

   border:0;

   border-bottom:1px solid #bbb;

   margin:0 auto;

   height: 50px;

   position: relative;

   min-width: 360px;

   width: 100%;

   z-index: auto !important;

   padding: 0 10px

}



.hdr-table

{

	display: table;

	width: 100%;

}

.hdr-cell

{

	display: table-cell;

	vertical-align: middle;

}









.ly-bmk-layout

{

   display: table-row;

}



.ly-bmk-cell

{

   display: table-cell;

   vertical-align: top;

}





.ly-bmk-sidebar-l, .ly-bmk-sidebar-l-mob

{

   background: #FFFFFF;

   border-right:1px solid #A6A6A6;

   margin:0;

   width: 330px;

}



.ly-bmk-content

{

   margin:0 auto;

}



@media all and (max-width: 750px)

{

    .ly-bmk-sidebar-l

	{position:fixed;margin-left:-340px}

	.ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob

	{margin-left:0px;position:fixed;z-index:11111;overflow-y:auto;

	-webkit-transform: translate3d(0px, 0, 0);

	-moz-transform: translate3d(0, 0, 0);

	-o-transform: translate3d(0, 0, 0);

	-ms-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);

	-webkit-transition: all 0.3s linear;

	-moz-transition: all 0.3s linear;

	-ms-transition: all 0.3s linear;

	-o-transition: all 0.3s linear;

	transition: all 0.3s linear;

	height: 100%;

  top: 0;

	}

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>

		<div class="ly-bmk-sheet">

			<header class="ly-bmk-header">

				<div class="hdr-table">

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a href="#">Logo</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li><a id="btn-menusb-l" href="#">Sidebar</a></li>

							</ul>

						</nav>

					</div>

					<div class="hdr-cell">

						<nav class="ly-bmk-navc">

							<ul class="ly-bmk-hmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon Header</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

							</ul>

						</nav>

					</div>

				</div>

			</header>

			<div class="ly-bmk-layout">

				<div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">

					

						<div class="ly-bmk-vmenu-content">

							<ul class="ly-bmk-vmenu">

								<li class="dropdown">

									<a data-toggle="dropdown">DropDwon SideBar</a>

									<ul class="dropdown-menu">

										<li><a href="#">HTML</a></li>

										<li><a href="#">CSS</a></li>

										<li><a href="#">JavaScript</a></li>

									</ul>

								</li>

								<li><a href="#">Test</a></li>

							</ul>

						</div>

					</div>

				</div>

				<div class="ly-bmk-cell ly-bmk-content">

						<p>WELCOME</p>

				</div>

			</div>

</body>

javascript jquery

edited Nov 11 at 23:22

asked Nov 11 at 21:18

Bynd

191213

edited Nov 11 at 23:22

asked Nov 11 at 21:18

Bynd

191213

edited Nov 11 at 23:22

asked Nov 11 at 21:18

Bynd

191213

asked Nov 11 at 21:18

Bynd

191213

asked Nov 11 at 21:18

Bynd

191213

1

You didn't provide a working bootstrap example and therefore cannot ascertain if this is programmer error
– vol7ron
Nov 11 at 21:29

it's bootstrap dropdown
– Bynd
Nov 11 at 21:54

1

No, I added that code to a snippet with bootstrap and it did not render at all. It's incomplete. Though, an answer could be provided with the code given, I encourage you to provide a working example to make it easier for those answering the question
– vol7ron
Nov 11 at 21:58

I add all my code HTML CSS JAVASCRIPT, dropdown in header work but in sidebar not work if you click on sidebar on header will show sidebar
– Bynd
Nov 11 at 23:17

add a comment |

1

You didn't provide a working bootstrap example and therefore cannot ascertain if this is programmer error
– vol7ron
Nov 11 at 21:29

it's bootstrap dropdown
– Bynd
Nov 11 at 21:54

1

No, I added that code to a snippet with bootstrap and it did not render at all. It's incomplete. Though, an answer could be provided with the code given, I encourage you to provide a working example to make it easier for those answering the question
– vol7ron
Nov 11 at 21:58

I add all my code HTML CSS JAVASCRIPT, dropdown in header work but in sidebar not work if you click on sidebar on header will show sidebar
– Bynd
Nov 11 at 23:17

You didn't provide a working bootstrap example and therefore cannot ascertain if this is programmer error
– vol7ron
Nov 11 at 21:29

it's bootstrap dropdown
– Bynd
Nov 11 at 21:54

No, I added that code to a snippet with bootstrap and it did not render at all. It's incomplete. Though, an answer could be provided with the code given, I encourage you to provide a working example to make it easier for those answering the question
– vol7ron
Nov 11 at 21:58

I add all my code HTML CSS JAVASCRIPT, dropdown in header work but in sidebar not work if you click on sidebar on header will show sidebar
– Bynd
Nov 11 at 23:17

add a comment |

1 Answer
1

active

oldest

votes

Note: I didn't look into this too closely. A better answer may exist and in that case, I may delete this. Since there isn't another answer yet, I'm offering this on the basis that a partial/incomplete answer may be better than no answer and leave it to the community to update/edit this.

Discriminate Elements

In your click events, you need to determine when the propagation should stop. Below this is done by sniffing the target element as well as evaluating its ancestry.

I get the class of the parent element and the class of the closest UL if it exists and check to see if the class is a dropdown (button) or dropdown-menu (menu list). If it is, then the event may continue, otherwise the propagation is halted:

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



  $('#btn-menusb-l').click(function(e) {

    e.stopPropagation();

    $('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

  });

  

  $('#sdbr-l').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))



    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      e.stopPropagation()

  });

  

  $('body,html').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))

    

    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');     

  });

  

  $(window).resize(function() {

    $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

  });



})

.ly-bmk-header {

  border: 0;

  border-bottom: 1px solid #bbb;

  margin: 0 auto;

  height: 50px;

  position: relative;

  min-width: 360px;

  width: 100%;

  z-index: auto !important;

  padding: 0 10px

}



.hdr-table {

  display: table;

  width: 100%;

}



.hdr-cell {

  display: table-cell;

  vertical-align: middle;

}



.ly-bmk-layout {

  display: table-row;

}



.ly-bmk-cell {

  display: table-cell;

  vertical-align: top;

}



.ly-bmk-sidebar-l,

.ly-bmk-sidebar-l-mob {

  background: #FFFFFF;

  border-right: 1px solid #A6A6A6;

  margin: 0;

  width: 330px;

}



.ly-bmk-content {

  margin: 0 auto;

}



@media all and (max-width: 750px) {

  .ly-bmk-sidebar-l {

    position: fixed;

    margin-left: -340px

  }

  .ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob {

    margin-left: 0px;

    position: fixed;

    z-index: 11111;

    overflow-y: auto;

    -webkit-transform: translate3d(0px, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    height: 100%;

    top: 0;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />





<div class="container">

  <div class="ly-bmk-sheet">

    <header class="ly-bmk-header">

      <div class="hdr-table">

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a href="#">Logo</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a id="btn-menusb-l" href="#">Sidebar</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li class="dropdown">

                <a data-toggle="dropdown">DropDown Header</a>

                <ul class="dropdown-menu">

                  <li><a href="#">HTML</a></li>

                  <li><a href="#">CSS</a></li>

                  <li><a href="#">JavaScript</a></li>

                </ul>

              </li>

            </ul>

          </nav>

        </div>

      </div>

    </header>

    <div class="ly-bmk-layout">

      <div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">



        <div class="ly-bmk-vmenu-content">

          <ul class="ly-bmk-vmenu">

            <li class="dropdown">

              <a data-toggle="dropdown">DropDown SideBar</a>

              <ul class="dropdown-menu">

                <li><a href="#">HTML</a></li>

                <li><a href="#">CSS</a></li>

                <li><a href="#">JavaScript</a></li>

              </ul>

            </li>

            <li><a href="#">Test</a></li>

          </ul>

        </div>

      </div>

    </div>

    <div class="ly-bmk-cell ly-bmk-content">

      <p>WELCOME</p>

    </div>

  </div>

</div>

answered Nov 12 at 2:07

vol7ron

24.5k1286148

It's working perfect 100%
– Bynd
Nov 12 at 3:01

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253336%2fstoppropagation-prevents-bootstrap-dropdown%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Discriminate Elements

In your click events, you need to determine when the propagation should stop. Below this is done by sniffing the target element as well as evaluating its ancestry.

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



  $('#btn-menusb-l').click(function(e) {

    e.stopPropagation();

    $('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

  });

  

  $('#sdbr-l').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))



    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      e.stopPropagation()

  });

  

  $('body,html').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))

    

    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');     

  });

  

  $(window).resize(function() {

    $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

  });



})

.ly-bmk-header {

  border: 0;

  border-bottom: 1px solid #bbb;

  margin: 0 auto;

  height: 50px;

  position: relative;

  min-width: 360px;

  width: 100%;

  z-index: auto !important;

  padding: 0 10px

}



.hdr-table {

  display: table;

  width: 100%;

}



.hdr-cell {

  display: table-cell;

  vertical-align: middle;

}



.ly-bmk-layout {

  display: table-row;

}



.ly-bmk-cell {

  display: table-cell;

  vertical-align: top;

}



.ly-bmk-sidebar-l,

.ly-bmk-sidebar-l-mob {

  background: #FFFFFF;

  border-right: 1px solid #A6A6A6;

  margin: 0;

  width: 330px;

}



.ly-bmk-content {

  margin: 0 auto;

}



@media all and (max-width: 750px) {

  .ly-bmk-sidebar-l {

    position: fixed;

    margin-left: -340px

  }

  .ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob {

    margin-left: 0px;

    position: fixed;

    z-index: 11111;

    overflow-y: auto;

    -webkit-transform: translate3d(0px, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    height: 100%;

    top: 0;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />





<div class="container">

  <div class="ly-bmk-sheet">

    <header class="ly-bmk-header">

      <div class="hdr-table">

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a href="#">Logo</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a id="btn-menusb-l" href="#">Sidebar</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li class="dropdown">

                <a data-toggle="dropdown">DropDown Header</a>

                <ul class="dropdown-menu">

                  <li><a href="#">HTML</a></li>

                  <li><a href="#">CSS</a></li>

                  <li><a href="#">JavaScript</a></li>

                </ul>

              </li>

            </ul>

          </nav>

        </div>

      </div>

    </header>

    <div class="ly-bmk-layout">

      <div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">



        <div class="ly-bmk-vmenu-content">

          <ul class="ly-bmk-vmenu">

            <li class="dropdown">

              <a data-toggle="dropdown">DropDown SideBar</a>

              <ul class="dropdown-menu">

                <li><a href="#">HTML</a></li>

                <li><a href="#">CSS</a></li>

                <li><a href="#">JavaScript</a></li>

              </ul>

            </li>

            <li><a href="#">Test</a></li>

          </ul>

        </div>

      </div>

    </div>

    <div class="ly-bmk-cell ly-bmk-content">

      <p>WELCOME</p>

    </div>

  </div>

</div>

answered Nov 12 at 2:07

vol7ron

24.5k1286148

It's working perfect 100%
– Bynd
Nov 12 at 3:01

add a comment |

Discriminate Elements

In your click events, you need to determine when the propagation should stop. Below this is done by sniffing the target element as well as evaluating its ancestry.

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



  $('#btn-menusb-l').click(function(e) {

    e.stopPropagation();

    $('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

  });

  

  $('#sdbr-l').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))



    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      e.stopPropagation()

  });

  

  $('body,html').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))

    

    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');     

  });

  

  $(window).resize(function() {

    $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

  });



})

.ly-bmk-header {

  border: 0;

  border-bottom: 1px solid #bbb;

  margin: 0 auto;

  height: 50px;

  position: relative;

  min-width: 360px;

  width: 100%;

  z-index: auto !important;

  padding: 0 10px

}



.hdr-table {

  display: table;

  width: 100%;

}



.hdr-cell {

  display: table-cell;

  vertical-align: middle;

}



.ly-bmk-layout {

  display: table-row;

}



.ly-bmk-cell {

  display: table-cell;

  vertical-align: top;

}



.ly-bmk-sidebar-l,

.ly-bmk-sidebar-l-mob {

  background: #FFFFFF;

  border-right: 1px solid #A6A6A6;

  margin: 0;

  width: 330px;

}



.ly-bmk-content {

  margin: 0 auto;

}



@media all and (max-width: 750px) {

  .ly-bmk-sidebar-l {

    position: fixed;

    margin-left: -340px

  }

  .ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob {

    margin-left: 0px;

    position: fixed;

    z-index: 11111;

    overflow-y: auto;

    -webkit-transform: translate3d(0px, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    height: 100%;

    top: 0;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />





<div class="container">

  <div class="ly-bmk-sheet">

    <header class="ly-bmk-header">

      <div class="hdr-table">

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a href="#">Logo</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a id="btn-menusb-l" href="#">Sidebar</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li class="dropdown">

                <a data-toggle="dropdown">DropDown Header</a>

                <ul class="dropdown-menu">

                  <li><a href="#">HTML</a></li>

                  <li><a href="#">CSS</a></li>

                  <li><a href="#">JavaScript</a></li>

                </ul>

              </li>

            </ul>

          </nav>

        </div>

      </div>

    </header>

    <div class="ly-bmk-layout">

      <div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">



        <div class="ly-bmk-vmenu-content">

          <ul class="ly-bmk-vmenu">

            <li class="dropdown">

              <a data-toggle="dropdown">DropDown SideBar</a>

              <ul class="dropdown-menu">

                <li><a href="#">HTML</a></li>

                <li><a href="#">CSS</a></li>

                <li><a href="#">JavaScript</a></li>

              </ul>

            </li>

            <li><a href="#">Test</a></li>

          </ul>

        </div>

      </div>

    </div>

    <div class="ly-bmk-cell ly-bmk-content">

      <p>WELCOME</p>

    </div>

  </div>

</div>

answered Nov 12 at 2:07

vol7ron

24.5k1286148

It's working perfect 100%
– Bynd
Nov 12 at 3:01

add a comment |

Discriminate Elements

In your click events, you need to determine when the propagation should stop. Below this is done by sniffing the target element as well as evaluating its ancestry.

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



  $('#btn-menusb-l').click(function(e) {

    e.stopPropagation();

    $('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

  });

  

  $('#sdbr-l').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))



    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      e.stopPropagation()

  });

  

  $('body,html').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))

    

    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');     

  });

  

  $(window).resize(function() {

    $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

  });



})

.ly-bmk-header {

  border: 0;

  border-bottom: 1px solid #bbb;

  margin: 0 auto;

  height: 50px;

  position: relative;

  min-width: 360px;

  width: 100%;

  z-index: auto !important;

  padding: 0 10px

}



.hdr-table {

  display: table;

  width: 100%;

}



.hdr-cell {

  display: table-cell;

  vertical-align: middle;

}



.ly-bmk-layout {

  display: table-row;

}



.ly-bmk-cell {

  display: table-cell;

  vertical-align: top;

}



.ly-bmk-sidebar-l,

.ly-bmk-sidebar-l-mob {

  background: #FFFFFF;

  border-right: 1px solid #A6A6A6;

  margin: 0;

  width: 330px;

}



.ly-bmk-content {

  margin: 0 auto;

}



@media all and (max-width: 750px) {

  .ly-bmk-sidebar-l {

    position: fixed;

    margin-left: -340px

  }

  .ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob {

    margin-left: 0px;

    position: fixed;

    z-index: 11111;

    overflow-y: auto;

    -webkit-transform: translate3d(0px, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    height: 100%;

    top: 0;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />





<div class="container">

  <div class="ly-bmk-sheet">

    <header class="ly-bmk-header">

      <div class="hdr-table">

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a href="#">Logo</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a id="btn-menusb-l" href="#">Sidebar</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li class="dropdown">

                <a data-toggle="dropdown">DropDown Header</a>

                <ul class="dropdown-menu">

                  <li><a href="#">HTML</a></li>

                  <li><a href="#">CSS</a></li>

                  <li><a href="#">JavaScript</a></li>

                </ul>

              </li>

            </ul>

          </nav>

        </div>

      </div>

    </header>

    <div class="ly-bmk-layout">

      <div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">



        <div class="ly-bmk-vmenu-content">

          <ul class="ly-bmk-vmenu">

            <li class="dropdown">

              <a data-toggle="dropdown">DropDown SideBar</a>

              <ul class="dropdown-menu">

                <li><a href="#">HTML</a></li>

                <li><a href="#">CSS</a></li>

                <li><a href="#">JavaScript</a></li>

              </ul>

            </li>

            <li><a href="#">Test</a></li>

          </ul>

        </div>

      </div>

    </div>

    <div class="ly-bmk-cell ly-bmk-content">

      <p>WELCOME</p>

    </div>

  </div>

</div>

answered Nov 12 at 2:07

vol7ron

24.5k1286148

Discriminate Elements

In your click events, you need to determine when the propagation should stop. Below this is done by sniffing the target element as well as evaluating its ancestry.

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



  $('#btn-menusb-l').click(function(e) {

    e.stopPropagation();

    $('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

  });

  

  $('#sdbr-l').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))



    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      e.stopPropagation()

  });

  

  $('body,html').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))

    

    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');     

  });

  

  $(window).resize(function() {

    $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

  });



})

.ly-bmk-header {

  border: 0;

  border-bottom: 1px solid #bbb;

  margin: 0 auto;

  height: 50px;

  position: relative;

  min-width: 360px;

  width: 100%;

  z-index: auto !important;

  padding: 0 10px

}



.hdr-table {

  display: table;

  width: 100%;

}



.hdr-cell {

  display: table-cell;

  vertical-align: middle;

}



.ly-bmk-layout {

  display: table-row;

}



.ly-bmk-cell {

  display: table-cell;

  vertical-align: top;

}



.ly-bmk-sidebar-l,

.ly-bmk-sidebar-l-mob {

  background: #FFFFFF;

  border-right: 1px solid #A6A6A6;

  margin: 0;

  width: 330px;

}



.ly-bmk-content {

  margin: 0 auto;

}



@media all and (max-width: 750px) {

  .ly-bmk-sidebar-l {

    position: fixed;

    margin-left: -340px

  }

  .ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob {

    margin-left: 0px;

    position: fixed;

    z-index: 11111;

    overflow-y: auto;

    -webkit-transform: translate3d(0px, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    height: 100%;

    top: 0;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />





<div class="container">

  <div class="ly-bmk-sheet">

    <header class="ly-bmk-header">

      <div class="hdr-table">

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a href="#">Logo</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a id="btn-menusb-l" href="#">Sidebar</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li class="dropdown">

                <a data-toggle="dropdown">DropDown Header</a>

                <ul class="dropdown-menu">

                  <li><a href="#">HTML</a></li>

                  <li><a href="#">CSS</a></li>

                  <li><a href="#">JavaScript</a></li>

                </ul>

              </li>

            </ul>

          </nav>

        </div>

      </div>

    </header>

    <div class="ly-bmk-layout">

      <div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">



        <div class="ly-bmk-vmenu-content">

          <ul class="ly-bmk-vmenu">

            <li class="dropdown">

              <a data-toggle="dropdown">DropDown SideBar</a>

              <ul class="dropdown-menu">

                <li><a href="#">HTML</a></li>

                <li><a href="#">CSS</a></li>

                <li><a href="#">JavaScript</a></li>

              </ul>

            </li>

            <li><a href="#">Test</a></li>

          </ul>

        </div>

      </div>

    </div>

    <div class="ly-bmk-cell ly-bmk-content">

      <p>WELCOME</p>

    </div>

  </div>

</div>

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



  $('#btn-menusb-l').click(function(e) {

    e.stopPropagation();

    $('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

  });

  

  $('#sdbr-l').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))



    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      e.stopPropagation()

  });

  

  $('body,html').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))

    

    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');     

  });

  

  $(window).resize(function() {

    $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

  });



})

.ly-bmk-header {

  border: 0;

  border-bottom: 1px solid #bbb;

  margin: 0 auto;

  height: 50px;

  position: relative;

  min-width: 360px;

  width: 100%;

  z-index: auto !important;

  padding: 0 10px

}



.hdr-table {

  display: table;

  width: 100%;

}



.hdr-cell {

  display: table-cell;

  vertical-align: middle;

}



.ly-bmk-layout {

  display: table-row;

}



.ly-bmk-cell {

  display: table-cell;

  vertical-align: top;

}



.ly-bmk-sidebar-l,

.ly-bmk-sidebar-l-mob {

  background: #FFFFFF;

  border-right: 1px solid #A6A6A6;

  margin: 0;

  width: 330px;

}



.ly-bmk-content {

  margin: 0 auto;

}



@media all and (max-width: 750px) {

  .ly-bmk-sidebar-l {

    position: fixed;

    margin-left: -340px

  }

  .ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob {

    margin-left: 0px;

    position: fixed;

    z-index: 11111;

    overflow-y: auto;

    -webkit-transform: translate3d(0px, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    height: 100%;

    top: 0;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />





<div class="container">

  <div class="ly-bmk-sheet">

    <header class="ly-bmk-header">

      <div class="hdr-table">

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a href="#">Logo</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a id="btn-menusb-l" href="#">Sidebar</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li class="dropdown">

                <a data-toggle="dropdown">DropDown Header</a>

                <ul class="dropdown-menu">

                  <li><a href="#">HTML</a></li>

                  <li><a href="#">CSS</a></li>

                  <li><a href="#">JavaScript</a></li>

                </ul>

              </li>

            </ul>

          </nav>

        </div>

      </div>

    </header>

    <div class="ly-bmk-layout">

      <div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">



        <div class="ly-bmk-vmenu-content">

          <ul class="ly-bmk-vmenu">

            <li class="dropdown">

              <a data-toggle="dropdown">DropDown SideBar</a>

              <ul class="dropdown-menu">

                <li><a href="#">HTML</a></li>

                <li><a href="#">CSS</a></li>

                <li><a href="#">JavaScript</a></li>

              </ul>

            </li>

            <li><a href="#">Test</a></li>

          </ul>

        </div>

      </div>

    </div>

    <div class="ly-bmk-cell ly-bmk-content">

      <p>WELCOME</p>

    </div>

  </div>

</div>

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



  $('#btn-menusb-l').click(function(e) {

    e.stopPropagation();

    $('#sdbr-l').toggleClass("ly-bmk-sidebar-l-mob");

  });

  

  $('#sdbr-l').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))



    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      e.stopPropagation()

  });

  

  $('body,html').click(function(e) {

    let classes = Array.from(e.target.classList)

    if (e.target.closest('ul') != null)

      classes=classes.concat(Array.from(e.target.closest('ul').classList))

    if (e.target.parentElement != null)

      classes=classes.concat(Array.from(e.target.parentElement.classList))

    

    if (!(classes.includes('dropdown') || classes.includes('dropdown-menu')))

      $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');     

  });

  

  $(window).resize(function() {

    $('#sdbr-l').removeClass('ly-bmk-sidebar-l-mob');

  });



})

.ly-bmk-header {

  border: 0;

  border-bottom: 1px solid #bbb;

  margin: 0 auto;

  height: 50px;

  position: relative;

  min-width: 360px;

  width: 100%;

  z-index: auto !important;

  padding: 0 10px

}



.hdr-table {

  display: table;

  width: 100%;

}



.hdr-cell {

  display: table-cell;

  vertical-align: middle;

}



.ly-bmk-layout {

  display: table-row;

}



.ly-bmk-cell {

  display: table-cell;

  vertical-align: top;

}



.ly-bmk-sidebar-l,

.ly-bmk-sidebar-l-mob {

  background: #FFFFFF;

  border-right: 1px solid #A6A6A6;

  margin: 0;

  width: 330px;

}



.ly-bmk-content {

  margin: 0 auto;

}



@media all and (max-width: 750px) {

  .ly-bmk-sidebar-l {

    position: fixed;

    margin-left: -340px

  }

  .ly-bmk-sidebar-l.ly-bmk-sidebar-l-mob {

    margin-left: 0px;

    position: fixed;

    z-index: 11111;

    overflow-y: auto;

    -webkit-transform: translate3d(0px, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    -webkit-transition: all 0.3s linear;

    -moz-transition: all 0.3s linear;

    -ms-transition: all 0.3s linear;

    -o-transition: all 0.3s linear;

    transition: all 0.3s linear;

    height: 100%;

    top: 0;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />





<div class="container">

  <div class="ly-bmk-sheet">

    <header class="ly-bmk-header">

      <div class="hdr-table">

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a href="#">Logo</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li><a id="btn-menusb-l" href="#">Sidebar</a></li>

            </ul>

          </nav>

        </div>

        <div class="hdr-cell">

          <nav class="ly-bmk-navc">

            <ul class="ly-bmk-hmenu">

              <li class="dropdown">

                <a data-toggle="dropdown">DropDown Header</a>

                <ul class="dropdown-menu">

                  <li><a href="#">HTML</a></li>

                  <li><a href="#">CSS</a></li>

                  <li><a href="#">JavaScript</a></li>

                </ul>

              </li>

            </ul>

          </nav>

        </div>

      </div>

    </header>

    <div class="ly-bmk-layout">

      <div id="sdbr-l" class="ly-bmk-cell ly-bmk-sidebar-l">



        <div class="ly-bmk-vmenu-content">

          <ul class="ly-bmk-vmenu">

            <li class="dropdown">

              <a data-toggle="dropdown">DropDown SideBar</a>

              <ul class="dropdown-menu">

                <li><a href="#">HTML</a></li>

                <li><a href="#">CSS</a></li>

                <li><a href="#">JavaScript</a></li>

              </ul>

            </li>

            <li><a href="#">Test</a></li>

          </ul>

        </div>

      </div>

    </div>

    <div class="ly-bmk-cell ly-bmk-content">

      <p>WELCOME</p>

    </div>

  </div>

</div>

answered Nov 12 at 2:07

vol7ron

24.5k1286148

answered Nov 12 at 2:07

vol7ron

24.5k1286148

answered Nov 12 at 2:07

vol7ron

24.5k1286148

answered Nov 12 at 2:07

vol7ron

24.5k1286148

It's working perfect 100%
– Bynd
Nov 12 at 3:01

add a comment |

It's working perfect 100%
– Bynd
Nov 12 at 3:01

It's working perfect 100%
– Bynd
Nov 12 at 3:01

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu