javascript - stopPropagation 阻止引导下拉菜单

标签 javascript jquery

我使用jquery来隐藏和显示侧边栏，如果我点击外部或调整侧边栏隐藏的大小，但我遇到了问题，所以我的所有下拉列表都停止了，因为我使用了stopPropagation

我的 HTML 是 

$('#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>

如果我点击内部，我想保持侧边栏显示，但如果我点击外部，我想隐藏侧边栏，我的jquery代码可以工作，除了它阻止我的下拉菜单显示

  • 如果宽度小于 750 像素，侧边栏将隐藏
  • 标题中的侧边栏，如果宽度小于 750 像素，则显示侧边栏
  • 侧边栏中的下拉菜单不起作用，但标题中的下拉菜单起作用

最佳答案

注意:我没有仔细研究这一点。可能存在更好的答案，在这种情况下，我可能会删除它。由于还没有其他答案，我提供此答案的基础是部分/不完整的答案可能比没有答案好，并将其留给社区来更新/编辑。

区分元素

在点击事件中，您需要确定何时停止传播。下面是通过嗅探目标元素并评估其祖先来完成的。

我获取父元素的类和最接近的 UL 的类(如果存在)，并检查该类是否是 dropdown (按钮)或 dropdown-menu(菜单列表)。如果是，则事件可能会继续，否则传播将停止:

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>

关于javascript - stopPropagation 阻止引导下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53253336/

上一篇：javascript - 从状态中删除对象会删除父对象的键

下一篇：JavaScript 缓慢且不干燥

相关文章：

javascript - 使用正则表达式从 url 匹配 id

javascript - 公开课来后如何去掉附加的h2标签？我正在努力，但没有工作

javascript - jquery 在可排序中交换排序

javascript - 为什么我的 JavaScript 代码只在第二次点击时执行？

php - 如何在 PHP 的自动完成中根据名字和姓氏返回 ID？

javascript - 折叠和展开选项卡 jquery/simple accordion

javascript - 使用 JavaScript/jQuery 移动表单中的输入字段位置

javascript - 从 div 动态获取 iFrame 代码

javascript - 如何在 JQuery 中定位相对于按钮的 div

jquery - 获取复选框以在单击时保持选中状态

©2024 IT工具网  联系我们