javascript - 显示模态时隐藏切换导航

Question

我有一个按钮，上面有子菜单切换，当点击按钮时它显示子菜单，当点击第三项时 “清除我的 list ” 它启动 Bootstrap 模式，我想要的是在 Bootstrap 模式可见时隐藏切换菜单。

这是 JSfiddle:https://jsfiddle.net/sanjeevks121/4dov2fwn/1/

 $("#guideContainer-rootPanel-checklist-submit___widget").click(function(e){
    $(".btn-options").toggle();
});
$(".btn-options > ul > li > a:contains('Clear my checklist')").click(function(e){
    $("#clear_all_checklist").modal("show");
    e.stopPropagation();
});

Answer 1

简单地说，您可以使用 jquery hide(); 隐藏到菜单； https://jsfiddle.net/Liamm12/4dov2fwn/3/

$("#guideContainer-rootPanel-checklist-submit___widget").click(function(e){
        $(".btn-options").toggle();
});
$(".btn-options > ul > li > a:contains('Clear my checklist')").click(function(e){
        $("#clear_all_checklist").modal("show");
        $(".btn-options").hide();
        e.stopPropagation();
});

.button-medium{margin-top:200px}
.btn-options {
	position: absolute;
	left: 12px;
	top: 251px;
	background: #fff;
	box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.2);
	border-radius: 4px;
	border: 1px solid #d3d3d3;
	padding: 0;
	font-size: 14px;
}
.btn-options > ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.btn-options > ul > li {
	list-style: none;
}
.btn-options > ul > li > a {
	display: block;
	padding: 8px 20px;
	text-decoration: none;
	border-bottom: 1px solid #d3d3d3;
}
.btn-options > ul > li > a:hover {
	background: #f4f4f4;
	color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button class="btn  button-medium submit" type="button" id="guideContainer-rootPanel-checklist-submit___widget" name="guideContainer-rootPanel-checklist-submit___jqName" style="position: relative;" tabindex="0" aria-label="Options" placeholder="" aria-describedby="guideContainer-rootPanel-checklist-submit___guideFieldLongDescription" data-original-title="" title="">
               <i class="sg-Btn-icon "></i>
        <span class="iconButton-icon"></span> 
        <span class="iconButton-label" data-guide-button-label="true" style="">Options</span>

    </button>
<div class="btn-options" style="display: none;"><ul>
<li><a href="#" target="_self"> Print my checklist </a></li>
<li><a href="#" target="_self"> Email my checklist </a></li>
<li><a href="#" target="_self"> Clear my checklist </a></li>
<li><a href="#" target="_self"> Sign out of my checklist </a></li>
</ul>
</div>

<!-- Model Here -->
<div class="modal fade" tabindex="-1" role="dialog" id="clear_all_checklist">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

您也可以像这样在 jQuery 中使用 addClass 来做到这一点

https://jsfiddle.net/Liamm12/4dov2fwn/2/

$("#guideContainer-rootPanel-checklist-submit___widget").click(function(e){
        $(".btn-options").toggle();
});
$(".btn-options > ul > li > a:contains('Clear my checklist')").click(function(e){
        $("#clear_all_checklist").modal("show");
        $(".btn-options").addClass('hide');
        e.stopPropagation();
});

.button-medium{margin-top:200px}
.btn-options {
	position: absolute;
	left: 12px;
	top: 251px;
	background: #fff;
	box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.2);
	border-radius: 4px;
	border: 1px solid #d3d3d3;
	padding: 0;
	font-size: 14px;
}
.btn-options > ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.btn-options > ul > li {
	list-style: none;
}
.btn-options > ul > li > a {
	display: block;
	padding: 8px 20px;
	text-decoration: none;
	border-bottom: 1px solid #d3d3d3;
}
.btn-options > ul > li > a:hover {
	background: #f4f4f4;
	color: #000;
}
.hide {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button class="btn  button-medium submit" type="button" id="guideContainer-rootPanel-checklist-submit___widget" name="guideContainer-rootPanel-checklist-submit___jqName" style="position: relative;" tabindex="0" aria-label="Options" placeholder="" aria-describedby="guideContainer-rootPanel-checklist-submit___guideFieldLongDescription" data-original-title="" title="">
               <i class="sg-Btn-icon "></i>
        <span class="iconButton-icon"></span> 
        <span class="iconButton-label" data-guide-button-label="true" style="">Options</span>

    </button>
<div class="btn-options" style="display: none;"><ul>
<li><a href="#" target="_self"> Print my checklist </a></li>
<li><a href="#" target="_self"> Email my checklist </a></li>
<li><a href="#" target="_self"> Clear my checklist </a></li>
<li><a href="#" target="_self"> Sign out of my checklist </a></li>
</ul>
</div>

<!-- Model Here -->
<div class="modal fade" tabindex="-1" role="dialog" id="clear_all_checklist">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->