stopPropagation prevents bootstrap dropdown












2














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






javascript jquery







share|improve this question




















  • 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


















2














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






javascript jquery







share|improve this question




















  • 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
















2












2








2







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






javascript jquery







share|improve this question















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




javascript jquery






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 11 at 23:22

























asked Nov 11 at 21:18









Bynd

191213




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
















  • 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










1




1




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




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




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




1




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






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






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














1 Answer
1






active

oldest

votes


















2














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>








share|improve this answer





















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













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


















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















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














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>








share|improve this answer





















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


















2














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>








share|improve this answer





















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
















2












2








2






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>








share|improve this answer












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>








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>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 12 at 2:07









vol7ron

24.5k1286148




24.5k1286148












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




















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


















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






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




















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














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















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Full-time equivalent

Image
Full-time equivalent From Wikipedia, the free encyclopedia Jump to navigation Jump to search Full-time equivalent ( FTE ) or whole time equivalent ( WTE ) is a unit that indicates the workload of an employed person (or student) in a way that makes workloads or class loads comparable [1] across various contexts. FTE is often used to measure a worker's or student's involvement in a project, or to track cost reductions in an organization. An FTE of 1.0 is equivalent to a full-time worker or student, while an FTE of 0.5 signals half of a full work or school load. [2] Contents 1 U.S. Federal Government 2 In education 2.1 Example 3 Notes 4 References U.S. Federal Government [ edit ] In the U.S. Federal Government, FTE is defined by the Government Accountability Office (GAO) as the number of total hours worked divided by the maximum number of compensable hours in a full-time schedule as
Read more

Bicuculline

Image
Bicuculline From Wikipedia, the free encyclopedia Jump to navigation Jump to search Bicuculline Clinical data ATC code none Identifiers IUPAC name (6 R )-​6-​[(5 S )-​6-​methyl-​5,​6,​7,​8-​tetrahydro​[1,3]dioxolo​[4,5- g ]​isoquinolin-​5-​yl]​furo[3,4- e ]​[1,3]​benzodioxol-​8(6 H )-​one CAS Number 485-49-4   Y PubChem CID 10237 IUPHAR/BPS 2312 ChemSpider 9820   Y UNII Y37615DVKC ChEBI CHEBI:3092   N ChEMBL ChEMBL417990   N ECHA InfoCard 100.006.927 Chemical and physical data Formula C 20 H 17 N O 6 Molar mass 367.352 g/mol 3D model (JSmol) Interactive image Melting point 215 °C (419 °F) SMILES O=C1O[C@H](c3c1c2OCOc2cc3)[C@@H]5c4cc6OCOc6cc4CCN5C InChI InChI=1S/C20H17NO6/c1-21-5-4-10-6-14-15(25-8-24-14)7-12(10)17(21)18-11-2-3-13-19(26-9-23-13)16(11)20(22)27-18/h2-3,6-7,17-18H,4-5,8-9H2,1H3/t17-,18+/m0/s1   Y Key:IYGYMKDQCDOMRE-ZWKOTPCHSA-N
Read more

さくらももこ

Image
さくら ももこ 本名 非公開 [1] 生誕 ( 1965-05-08 ) 1965年5月8日 日本・静岡県清水市 （現・静岡市清水区） 死没 ( 2018-08-15 ) 2018年8月15日（53歳没） 日本・東京都目黒区 国籍 日本 職業 漫画家 エッセイスト 作詞家 活動期間 1984年 - 2018年 ジャンル 少女漫画 青年漫画 児童漫画 代表作 『ちびまる子ちゃん』 『コジコジ』 受賞 1989年：第13回講談社漫画賞少女部門 （『ちびまる子ちゃん』） 1990年：第32回日本レコード大賞 （『おどるポンポコリン』作詞） 公式サイト さくらプロダクション テンプレートを表示 さくら ももこ （1965年5月8日 - 2018年8月15日 [2] ）は、日本の漫画家、エッセイスト、作詞家、脚本家。また、自身の少女時代をモデルとした代表作のコミック『ちびまる子ちゃん』の主人公の名前でもある。静岡県清水市（現・静岡市清水区）出身。血液型はA型。身長159cm。一男の母親。 代表作のコミック『ちびまる子ちゃん』の単行本の売上は累計3000万部を超える。また、エッセイストとしても独特の視点と語り口で人気が高く、初期エッセイ集三部作『もものかんづめ』『さるのこしかけ』『たいのおかしら』はいずれもミリオンセラーを記録。 目次 1 経歴 2 人物・交遊関係 3 主な作品 3.1 漫画 3.2 エッセイ 3.3 作詞 3.4 詩集 3.5 雑誌・ムック本 3.6 翻訳 3.7 絵本、ドラマ脚本他 3.8 ラジオ出演 3.9 その他 4 関係人物 4.1 アシスタント 4.2 さくらももこを演じた人物 5 脚注 5.1 注釈 5.2 出典 6 外部リンク 経歴 年譜形式の経歴は推奨されていません 。人物の伝記は流れのあるまとまった文章で記述し、年譜は補助的な使用にとどめてください。 （ 2018年8月 ） 清水市立（当時）入江小学校
Read more