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
asked Nov 11 '18 at 21:18
Bynd
191213
add a comment |
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
asked Nov 11 '18 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 '18 at 21:29
it's bootstrap dropdown
– Bynd
Nov 11 '18 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 '18 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 '18 at 23:17
add a comment |
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
asked Nov 11 '18 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
javascript jquery
asked Nov 11 '18 at 21:18
Bynd
191213
asked Nov 11 '18 at 21:18
Bynd
191213
edited Nov 11 '18 at 23:22
asked Nov 11 '18 at 21:18
Bynd
191213
asked Nov 11 '18 at 21:18
Bynd
191213
asked Nov 11 '18 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 '18 at 21:29
it's bootstrap dropdown
– Bynd
Nov 11 '18 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 '18 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 '18 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 '18 at 21:29
it's bootstrap dropdown
– Bynd
Nov 11 '18 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 '18 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 '18 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 '18 at 21:29
You didn't provide a working bootstrap example and therefore cannot ascertain if this is programmer error
– vol7ron
Nov 11 '18 at 21:29
it's bootstrap dropdown
– Bynd
Nov 11 '18 at 21:54
it's bootstrap dropdown
– Bynd
Nov 11 '18 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 '18 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 '18 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 '18 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 '18 at 23:17
add a comment |
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') );
$('body,html').click(function(e) );
$(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 '18 at 2:07
vol7ron
24.5k1286148
It's working perfect 100%
– Bynd
Nov 12 '18 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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
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') );
$('body,html').click(function(e) );
$(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 '18 at 2:07
vol7ron
24.5k1286148
It's working perfect 100%
– Bynd
Nov 12 '18 at 3:01
add a comment |
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') );
$('body,html').click(function(e) );
$(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 '18 at 2:07
vol7ron
24.5k1286148
It's working perfect 100%
– Bynd
Nov 12 '18 at 3:01
add a comment |
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') );
$('body,html').click(function(e) );
$(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 '18 at 2:07
vol7ron
24.5k1286148
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') );
$('body,html').click(function(e) );
$(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') );
$('body,html').click(function(e) );
$(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') );
$('body,html').click(function(e) );
$(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 '18 at 2:07
vol7ron
24.5k1286148
answered Nov 12 '18 at 2:07
vol7ron
24.5k1286148
answered Nov 12 '18 at 2:07
vol7ron
24.5k1286148
answered Nov 12 '18 at 2:07
vol7ron
24.5k1286148
24.5k1286148
It's working perfect 100%
– Bynd
Nov 12 '18 at 3:01
add a comment |
It's working perfect 100%
– Bynd
Nov 12 '18 at 3:01
It's working perfect 100%
– Bynd
Nov 12 '18 at 3:01
It's working perfect 100%
– Bynd
Nov 12 '18 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');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
1
You didn't provide a working bootstrap example and therefore cannot ascertain if this is programmer error
– vol7ron
Nov 11 '18 at 21:29
it's bootstrap dropdown
– Bynd
Nov 11 '18 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 '18 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 '18 at 23:17