stopPropagation防止引导程序下拉

时间：2018-11-11 21:18:35

标签： 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像素，则侧边栏隐藏
    • 标头中的
  • 侧边栏，如果宽度小于750px，则显示侧边栏
  • 侧边栏中的下拉菜单不起作用，但标题中的那个起作用

1 个答案:

答案 0 :(得分：2)

注意：我没有仔细研究这个问题。可能存在更好的答案，在这种情况下，我可以删除它。由于还没有其他答案，因此我提供此答案的原因是，部分/不完整的答案可能比没有答案要好，并将其留给社区来更新/编辑。

区分元素

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

我得到父元素的类和最接近的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>

相关问题
最新问题