I want to show particular div on clicking of small round div, but when I click on that div
, all other div
s are also shown.
我想在点击小圆形div时显示特定div,但是当我点击该div时,所有其他div也会显示。
I have given Id , too But it's not working. where m I lacking?
我也给了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>
You can click on right side small round div to display another div.
您可以单击右侧小圆形div来显示另一个div。
3 个解决方案
#1
6
You need to target discussion_edit_div
in current element i.e. this
context. Use .closest()
/.parents()
to traverse up to common parent then use .find()
to target the desired element.
您需要在当前元素(即此上下文)中定位discussion_edit_div。使用.closest()/。parentsates()遍历公共父级,然后使用.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");
});
As per comment, you need
根据评论,你需要
$("#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>
You can also use the common class discussion_round_div
to bind click handler.
您还可以使用公共类discussion_round_div绑定单击处理程序。
$(".discussion_round_div").click(function() {
$(this).closest('.panel').find('.discussion_edit_div').toggle("slow");
});
#2
0
$("#declined").click(function(){
$(this).parent().next().toggle("slow");
});
$("#pending").click(function(){
$(this).parent().next().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;
}
<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>
#3
-1
You are using class name for showing div. use particular id to show div!
您正在使用类名来显示div。使用特定的id来显示div!
$("#declined").click(function(){
$('#div2').toggle("slow");
});
$("#pending").click(function(){
$('#div1').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" 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>
#1
6
You need to target discussion_edit_div
in current element i.e. this
context. Use .closest()
/.parents()
to traverse up to common parent then use .find()
to target the desired element.
您需要在当前元素(即此上下文)中定位discussion_edit_div。使用.closest()/。parentsates()遍历公共父级,然后使用.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");
});
As per comment, you need
根据评论,你需要
$("#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>
You can also use the common class discussion_round_div
to bind click handler.
您还可以使用公共类discussion_round_div绑定单击处理程序。
$(".discussion_round_div").click(function() {
$(this).closest('.panel').find('.discussion_edit_div').toggle("slow");
});
#2
0
$("#declined").click(function(){
$(this).parent().next().toggle("slow");
});
$("#pending").click(function(){
$(this).parent().next().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;
}
<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>
#3
-1
You are using class name for showing div. use particular id to show div!
您正在使用类名来显示div。使用特定的id来显示div!
$("#declined").click(function(){
$('#div2').toggle("slow");
});
$("#pending").click(function(){
$('#div1').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" 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>