显示模态时隐藏切换导航

Question

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

这是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（）即可将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 -->