Javascript："Share button"两个注释框(jsfiddle)上打开和关闭？

Question

Javascript:问题"分享按钮"打开和关闭两个评论框(jsfiddle)?请查看jsfiddle上的示例或显示片段视图。

当分享按钮被点击时，它打开了其他评论框的列表项，我不知道如何添加修复。

https://jsfiddle.net/64t88uze/2

$( "button" ).click(function() {
  $( ".share-list" ).toggle(); 
});

/*share buttons on each post*/
.share{float:left;list-style: none;padding: 0 10px 0 0px;margin: 0px; text-align:center; background-color:white;}
.share li {display: block;position: relative;width:80px}
.share ul {display: none;}
.share a {text-decoration: none;display: block;box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.125) inset;text-decoration: none;white-space: nowrap;color:#fff!important; border-radius:5%;}
.share ul li a:hover {text-decoration: none;}
.share  li:hover li {float: none;}
.share-list {
  position: absolute;
  z-index: 2;
}
.COMMENTBOX{height:300px; background-color:#F1F1F1;}
.COMMENTBOX2{height:300px; background-color:#D1D1D1;}
.share-list a :hover{background-color:grey;transition: 0.3s ease}
.share-list a {box-shadow: none;border-radius:0px;}
.fa.fa-facebook,.fa.fa-twitter,.fa.fa-google-plus{font-size:40px; text-align:center; color:#fff;padding:20px; display:block;}
.share button {
  padding: 0px;
  background-color: inherit;
}
.fa-share-alt {color: #02bf03;padding: 10px;}
.fa.fa-facebook{background-color:#3A5795;}
.fa.fa-twitter{background-color:#26C4F1;}
.fa.fa-google-plus{background-color:#E93F2E; border-bottom-left-radius:5%;border-bottom-right-radius:5%;}
.share h3 {display: inline;padding-right:10px;}
/*end*/

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <div class="COMMENTBOX"> 
<h1>Comment Box 1</h1>
<div class="share">
    <li><a href="#"><button id="shareit"><h3><i class="fa fa-share-alt faa-pulse animated"></i>Share</h3></button></a>
    <ul class="share-list">
        
		<li><a href="#"><i class="fa fa-facebook"></i></a></li>
		
		<li><a href="#"><i class="fa fa-twitter"></i></a></li>
		
		<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
   
   </ul>
         </li>
    </div>
     
     </DIV>
 <div class="COMMENTBOX2"> 
<h1>Comment Box 2</h1>
<div class="share">
    <li><a href="#"><button id="shareit"><h3><i class="fa fa-share-alt faa-pulse animated"></i>Share</h3></button></a>
    <ul class="share-list">
        
		<li><a href="#"><i class="fa fa-facebook"></i></a></li>
		
		<li><a href="#"><i class="fa fa-twitter"></i></a></li>
		
		<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
   
   </ul>
         </li>
    </div>
     
     </DIV>

Answer 1

使用以下代码:

$( "button" ).click(function() {
   $(this).parents('.share').find('.share-list').toggle();
});

代码中的作用域引用了称为.share-list的每个项目。你必须在被点击的元素中选择.share-list

Answer 2

添加了当用户点击"共享按钮"外时隐藏"按钮"的功能。

$( "button" ).click(function() {
   $(this).parents('.share').find('.share-list').toggle();
});
$("html").click(function(event) {
    if ($(event.target).closest('.share, .share-list').length === 0) {
        $('.share-list').hide();
    }
});