Jquery：在点击div

时间：2016-11-23 06:18:26

标签： javascript jquery html css

我想在点击小圆 div时显示特定的div，但是当我点击div时，所有其他div也会显示。

我也给了Id但是它不起作用。我缺少哪里？

$("#declined").click(function() {
  $('.discussion_edit_div').toggle("slow");
});

$("#pending").click(function() {
  $('.discussion_edit_div').toggle("slow");
});


$("#declined").click(function() {
  $('.discussion_edit_div').toggle("slow");
});

$("#pending").click(function() {
  $('.discussion_edit_div').toggle("slow");
});
.discussion {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  background: #2d3446;
  bottom: 9px;
  left: 15px;
  float: right;
}
.discussion_edit_div {
  background: #FFFFFF;
  display: none;
  position: absolute;
  right: 35px;
  border: thin #ddd solid;
  z-index: 1001;
  width: 130px;
  height: 100px;
}
ul li {
  padding: 5px;
  list-style-type: none;
}
ul li:hover {
  background: #ccc;
  cursor: pointer;
}
.discussion_round_div {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  border: thin #ddd solid;
  position: absolute;
  background: #FFFFFF;
  left: 39%;
  top: 20px;
}
.discussion_round_div_icon {
  position: relative;
  top: 10%;
  font-size: 25px;
  height: 25px;
}
.discussion_icon_text {
  text-align: center;
  font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="row" style="margin-top:5px;">
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="panel discussion_panel">
      <div class="panel-heading no_border_radius bg-dark padding_30">
        <div class="discussion pull-right cursor_pointer" id="pending"></div>
      </div>
      <div class="discussion_edit_div">
      </div>
      <div class="discussion_round_div">
        <div class="text-center discussion_round_div_icon">
          <span class="icon-clock "></span>
          <p class="discussion_icon_text">Pending</p>
        </div>
      </div>

      <div class="row margin_top_30 panel-body">
        <div class="date_div text-center">15,June 2016</div>
        <p class="text-center margin_top_10 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.</p>
        <hr class="margin_top_10" />
        <p class="text-center ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.Praesent a cursus nulla.</p>
        <hr class="margin_top_bottom_10" />
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="panel discussion_panel">
        <div class="panel-heading no_border_radius bg-dark padding_30">
          <div class="discussion pull-right cursor_pointer" id="declined"></div>
        </div>
        <div class="discussion_edit_div">
        </div>
        <div class="discussion_round_div">
          <div class="text-center discussion_round_div_icon">
            <span class="icon-check "></span>
            <p class="discussion_icon_text">Approved</p>
          </div>
        </div>

        <div class="row margin_top_30 panel-body">
          <div class="date_div text-center">15,June 2016</div>
          <p class="text-center margin_top_10 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.</p>
          <hr class="margin_top_10" />
          <p class="text-center ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.Praesent a cursus nulla.</p>
          <hr class="margin_top_bottom_10" />
        </div>



      </div>

您可以点击右侧小圆形div来显示另一个div。

3 个答案:

答案 0 :(得分：6)

您需要在当前元素discussion_edit_div上下文中定位this。使用.closest() / .parents()遍历普通父母，然后使用.find()定位所需元素。

$("#declined").click(function() {
  $(this).closest('.panel').find('.discussion_edit_div').toggle("slow");
});

$("#pending").click(function() {
  $(this).closest('.panel').find('.discussion_edit_div').toggle("slow");
});

根据评论，您需要

$("#declined, #pending").click(function() {
  var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');  
  relatedDiv.toggle("slow");

  $('.discussion_edit_div').not(relatedDiv).hide('slow');  
});


$("#declined, #pending").click(function() {
  var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');  
  relatedDiv.toggle("slow");
  
  $('.discussion_edit_div').not(relatedDiv).hide('slow');  
});
.discussion {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  background: #2d3446;
  bottom: 9px;
  left: 15px;
  float: right;
}
.discussion_edit_div {
  background: #FFFFFF;
  display: none;
  position: absolute;
  right: 35px;
  border: thin #ddd solid;
  z-index: 1001;
  width: 130px;
  height: 100px;
}
ul li {
  padding: 5px;
  list-style-type: none;
}
ul li:hover {
  background: #ccc;
  cursor: pointer;
}
.discussion_round_div {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  border: thin #ddd solid;
  position: absolute;
  background: #FFFFFF;
  left: 39%;
  top: 20px;
}
.discussion_round_div_icon {
  position: relative;
  top: 10%;
  font-size: 25px;
  height: 25px;
}
.discussion_icon_text {
  text-align: center;
  font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="row" style="margin-top:5px;">
  <div class="col-md-3 col-sm-6 col-xs-12">
    <div class="panel discussion_panel">
      <div class="panel-heading no_border_radius bg-dark padding_30">
        <div class="discussion pull-right cursor_pointer" id="pending"></div>
      </div>
      <div class="discussion_edit_div">

      </div>
      <div class="discussion_round_div">
        <div class="text-center discussion_round_div_icon">
          <span class="icon-clock "></span>
          <p class="discussion_icon_text">Pending</p>
        </div>
      </div>

      <div class="row margin_top_30 panel-body">
        <div class="date_div text-center">15,June 2016</div>
        <p class="text-center margin_top_10 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.</p>
        <hr class="margin_top_10" />
        <p class="text-center ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.Praesent a cursus nulla.</p>
        <hr class="margin_top_bottom_10" />
      </div>


    </div>


    <div class="col-md-3 col-sm-6 col-xs-12">
      <div class="panel discussion_panel">
        <div class="panel-heading no_border_radius bg-dark padding_30">
          <div class="discussion pull-right cursor_pointer" id="declined"></div>
        </div>

        <div class="discussion_edit_div">

        </div>
        <div class="discussion_round_div">
          <div class="text-center discussion_round_div_icon">
            <span class="icon-check "></span>
            <p class="discussion_icon_text">Approved</p>
          </div>
        </div>

        <div class="row margin_top_30 panel-body">
          <div class="date_div text-center">15,June 2016</div>
          <p class="text-center margin_top_10 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.</p>
          <hr class="margin_top_10" />
          <p class="text-center ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.Praesent a cursus nulla.</p>
          <hr class="margin_top_bottom_10" />
        </div>



      </div>

您还可以使用公共类discussion_round_div来绑定点击处理程序。

$(".discussion_round_div").click(function() {
  $(this).closest('.panel').find('.discussion_edit_div').toggle("slow");
});

答案 1 :(得分：0)

＆＃13;
＆＃13; 
$("#declined").click(function(){
        $(this).parent().next().toggle("slow");
    });

$("#pending").click(function(){
       $(this).parent().next().toggle("slow");
    });
＆＃13; 
.discussion {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  background: #2d3446;
  bottom: 9px;
  left: 15px;
  float:right;
}



.discussion_edit_div{
  background: #FFFFFF;
  display: none;
  position: absolute;
  right: 35px;
  border: thin #ddd solid;
  z-index: 1001;
  width: 130px;
  height:100px;

}

ul li{
    padding: 5px;
    list-style-type: none;
  }

  ul li:hover{
      background: #ccc;
      cursor: pointer;
    }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="row" style="margin-top:5px;">
            <div  class="col-md-3 col-sm-6 col-xs-12">
                <div class="panel discussion_panel">
                    <div class="panel-heading no_border_radius bg-dark padding_30">
                        <div class="discussion pull-right cursor_pointer" id="pending"></div>
                    </div>
                    <div class="discussion_edit_div">
                        
                    </div>
                    <div class="discussion_round_div">
                        <div class="text-center discussion_round_div_icon">
                            <span class="icon-clock "></span>
                            <p class="discussion_icon_text">Pending</p>
                        </div>
                    </div>

                    <div class="row margin_top_30 panel-body">
                        <div class="date_div text-center">15,June 2016</div>
                            <p class="text-center margin_top_10 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.</p>
                        <hr class="margin_top_10"/>
                        <p class="text-center ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.Praesent a cursus nulla.</p>
                        <hr class="margin_top_bottom_10"/>
                    </div>

                    
            </div>


            <div  class="col-md-3 col-sm-6 col-xs-12">
                <div class="panel discussion_panel">
                    <div class="panel-heading no_border_radius bg-dark padding_30">
                        <div class="discussion pull-right cursor_pointer" id="declined"></div>
                    </div>

                    <div class="discussion_edit_div">
                      
                    </div>
                    <div class="discussion_round_div">
                        <div class="text-center discussion_round_div_icon">
                            <span class="icon-check "></span>
                            <p class="discussion_icon_text">Approved</p>
                        </div>
                    </div>

                    <div class="row margin_top_30 panel-body">
                        <div class="date_div text-center">15,June 2016</div>
                        <p class="text-center margin_top_10 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.</p>
                        <hr class="margin_top_10"/>
                        <p class="text-center ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.Praesent a cursus nulla.</p>
                        <hr class="margin_top_bottom_10"/>
                    </div>

                   

</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-1)

您正在使用类名来显示div。使用特定的id来显示div！

＆＃13;
＆＃13; 
$("#declined").click(function(){
        $('#div2').toggle("slow");
    });

$("#pending").click(function(){
        $('#div1').toggle("slow");
    });
＆＃13; 
.discussion {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  background: #2d3446;
  bottom: 9px;
  left: 15px;
  float:right;
}



.discussion_edit_div{
  background: #FFFFFF;
  display: none;
  position: absolute;
  right: 35px;
  border: thin #ddd solid;
  z-index: 1001;
  width: 130px;
  height:100px;

}

ul li{
    padding: 5px;
    list-style-type: none;
  }

  ul li:hover{
      background: #ccc;
      cursor: pointer;
    }
 



.discussion_round_div {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  border: thin #ddd solid;
  position: absolute;
  background: #FFFFFF;
  left: 39%;
  top: 20px;
}

.discussion_round_div_icon{
  position: relative;
  top: 10%;
  font-size: 25px;
  height: 25px;
}

.discussion_icon_text{
  text-align: center;
  font-size: 10px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="row" style="margin-top:5px;">
            <div  class="col-md-3 col-sm-6 col-xs-12">
                <div class="panel discussion_panel">
                    <div class="panel-heading no_border_radius bg-dark padding_30">
                        <div class="discussion pull-right cursor_pointer" id="pending"></div>
                    </div>
                    <div class="discussion_edit_div" id="div1">
                        
                    </div>
                    <div class="discussion_round_div">
                        <div class="text-center discussion_round_div_icon">
                            <span class="icon-clock "></span>
                            <p class="discussion_icon_text">Pending</p>
                        </div>
                    </div>

                    <div class="row margin_top_30 panel-body">
                        <div class="date_div text-center">15,June 2016</div>
                            <p class="text-center margin_top_10 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.</p>
                        <hr class="margin_top_10"/>
                        <p class="text-center ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.Praesent a cursus nulla.</p>
                        <hr class="margin_top_bottom_10"/>
                    </div>

                    
            </div>


            <div  class="col-md-3 col-sm-6 col-xs-12">
                <div class="panel discussion_panel">
                    <div class="panel-heading no_border_radius bg-dark padding_30">
                        <div class="discussion pull-right cursor_pointer" id="declined"></div>
                    </div>

                    <div class="discussion_edit_div" id="div2">
                      
                    </div>
                    <div class="discussion_round_div">
                        <div class="text-center discussion_round_div_icon">
                            <span class="icon-check "></span>
                            <p class="discussion_icon_text">Approved</p>
                        </div>
                    </div>

                    <div class="row margin_top_30 panel-body">
                        <div class="date_div text-center">15,June 2016</div>
                        <p class="text-center margin_top_10 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.</p>
                        <hr class="margin_top_10"/>
                        <p class="text-center ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a cursus nulla.Praesent a cursus nulla.</p>
                        <hr class="margin_top_bottom_10"/>
                    </div>

                   

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题