Question

我正在尝试使用html和Jquery开发自定义工具提示。我点击问题图标并在工具提示中显示一些文本。我有两个同一类的问题图标。我的问题是当我点击第一个问题图标时，如果第二个工具提示是可见的，那么我想隐藏第二个工具提示。我不希望一次看到两个工具提示。下面是我的代码：

<div class="tab-container">
 <div class="policy-info-header">
  <div class="container">
   <div class="row">
    <div class="col-sm-12">     
     <ul id="tabs" class="nav nav-tabs policy-tabs" data-tabs="tabs">
      <li class="active"><a href="#policy-abstract" data-toggle="tab">Policy Abstract</a></li>
      <li><a href="#coverage-summary" data-toggle="tab">Coverage Summary</a></li>
     </ul>  
    </div>
   </div>
  </div>
</div>                      
<div class="container" role="main">
 <div class="row">
  <div class="col-sm-12">
   <div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="policy-abstract">
     <div class="panel panel-default">
      <div class="panel-body">
      <hr/>
       <div class="sub-wrapper">
         <span class="sub-title pull-left">Details</span>
         <ul class="policy-container">
         <li><span>Policy Number<i  id="policy-number" class="glyphicon glyphicon-question-sign">
        <div class="description-box">This is a policy number from which user can understand policyThis is a policy number from which user can understand policy..</div>                         
</i>
</span>
<label>13656524</label>
</li>
<li>
<span>Status Change Date</span><label>06/15/2016</label>
</li>
<li>
<span>Group Number
<i  id="group-number" class="glyphicon glyphicon-question-sign">
<div class="description-box">This is a policy number from which user can understand policyThis is a policy number from which user can understand policy..</div>                         
</i>
</span>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> 

JS:
$( document ).ready(function() {
 $('.policy-container span').on('click','i', function(e){ 
    //$(this).prev().find(".description-box").hide();
    //alert("p");
    $(this).find(".description-box").show();
    e.stopPropagation();
    });
    $(document).click(function() {
    $(".description-box").hide();  
    });
});

我的工作小提琴链接：https://jsfiddle.net/gbhopale/myrt7gpf/

Answer 1

您可以在单击问号时隐藏所有框，然后只打开正确的框。

 $(document).ready(function() {
   $('.policy-container span').on('click', 'i', function(e) {
     $(".description-box").hide();
     $(this).find(".description-box").show();
     e.stopPropagation();
   });
   $(document).click(function() {
     $(".description-box").hide();
   });
 });

如何隐藏/并使用Jquery显示以前打开的div

1 个答案:

的 JSFIDDLE