javascript - stopPropagation 防止引导下拉-6ren

javascript - stopPropagation 防止引导下拉

转载作者：行者123 更新时间：2023-11-29 20:48:23

我使用 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代码工作除了它阻止我的下拉菜单显示

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

最佳答案

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

区分元素

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

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

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 - 从状态中删除对象会删除父对象的键

文章推荐： android - AlarmManager 不适用于时间选择器

R中介分析——引导
我正在尝试使用中介包在 R 中进行中介分析。我查看了有关如何执行此操作的文档，并通读了 R 提供的示例(即，我已经运行了“example(mediate)”)。尽管如此，我还是无法运行最简单的中介。理
php - 引导 View
我在我的应用程序中引导 View 时遇到问题。我试图在 bootstrap 中获取 View 实例，以便我可以分配 View 变量等。问题是我似乎无法按照推荐的方式来做。我可以做这个: $this
java - 引导 RMI
我已经遵循了几个有关运行 RMI 应用程序的教程。但是，我似乎无法使其工作，因为我一直陷入相同的错误:ClassNotFoundException。我知道这个错误意味着我将文件放在了错误的位置，但我尝
aurelia - 引导 Aurelia
最后，我开始与 Aurelia 合作。有一个入门套件可用 Here这有助于初始化 Aurelia。但它是一个模板，应该在网站模板中使用。我有一个预配置 WebApi项目，我想在其中使用 Aureli
python - 针对回归问题对连续数据的数据集进行重采样(引导)
对于回归问题，我有一个训练数据集: - 3个具有高斯分布的变量 - 20 个均匀分布的变量。我的所有变量都是连续的，在 [0;1] 之间。问题是用于对我的回归模型进行评分的测试数据对所有变量具有均
CSS 溢出滚动(引导)
我正在尝试“拉伸(stretch)”或扩展第 1 列中的 A 部分以填充该行的高度。 1行2列: +---------------------+---------------------+ |
c# - 引导 WPF
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以
css - 引导 -4 填充
我正在使用 bootstrap 4 填充功能。默认情况下，bootstrap4 中的 col 或 col-12 类在左右应用 15px 填充。我想为移动设备设置左右padding 0，所以我使用下面的
linux-kernel - 引导 linux
我正在尝试通过自己编写引导加载程序来引导 linux 内核，但不知道如何加载内核。所有人都在说使用 int 13h 将扇区从硬盘加载到内存。其中部门应该加载？？加载扇区后怎么办？如果可以的话，请
react 路由器 + react 引导
如何合并两者以创建垂直菜单？我有一个基本的路由设置(它可以工作并呈现为标准的水平菜单): Home Gallery Contact 从 react-bootst
reactjs - 我应该在商店中存储永不更改(引导)的数据吗？
我的应用程序中有一些状态来自服务器并且不会更改(在用户 session 的生命周期内)。此状态在 HTML 中引导。我应该将它合并到 reducer 中作为商店的一部分吗？const bootstr
reactjs - 样式组件和 react 引导？
有没有办法使用 styled-components与 react-bootstrap 一起？ React-bootstrap 为其组件公开了 bsClass 属性而不是 className ，这似乎与
html - 引导 iframe 未调整大小
除了 YouTube 播放器的大小之外，以下代码运行良好。我无法将其调整为我想要的大小。我试着把 width="150"和 height="100"在 iframe 但什么也没发生。
jquery - foreach 引导 Accordion
我正在尝试使这个东西与 this one 相同。我已经打印了。但崩溃消耗不起作用。 @foreach($faqs as $faq)
java - 引导 Play 应用程序
我想在启动 Play 应用程序时运行一些代码。这似乎不起作用。有什么线索吗？ public class Global extends GlobalSettings { @Override
machine-learning - 什么是弱监督学习(引导)？
我了解监督学习和无监督学习之间的区别: 监督学习是一种使用标记数据“教导”分类器的方法。无监督学习让分类器“自行学习”，例如使用聚类。但是什么是“弱监督学习”？它如何对示例进行分类？最佳答案更
python - 引导 Python 在另一个文件夹中查找模块
我对 python 还是很陌生，所以请原谅我，如果这是非常简单的或非常错误的思考方式。我安装了 python 2.7。根据我在运行以下代码时的理解，它列出了它查找模块的目录。 Python 2.7.
html - 引导 slider 不滑动
我想使用 bootstrap carousel 制作一个 slider ，但我的 slider 不滑动即使我点击按钮也不会滑动我测试了很多其他的 bootstrap slider ，我也遇到了同样的
python - 引导 numpy 二维数组
我正在尝试通过替换 base 形状为 (4,2) 的 2D numpy 数组按行进行采样，比如 10 次。最终输出应该是一个 3D numpy 数组。尝试了下面的代码，它有效。但是有没有不用 for
jquery - 引导 slider 功能
我是 Bootstrap 的新手，现在我正在检查它的 slider 功能。简单的 slider 和动画效果 - 一切正常。但是我看不懂，我可以做这样的东西吗？ - http://www.owlcar

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - stopPropagation 防止引导下拉

区分元素