我有捉迷藏兄弟姐妹js函数,这里主要是3个团队
在此处单击马拉巴尔div时,Pazhassi和Travancore将会消失(即:我只需要带有显示按钮的马拉巴尔div详细信息即可。)
当我单击“显示”按钮时,它将返回其第一个视图,这意味着我需要所有div
我的jquery
function clickInline(id)
{
$('#row'+id).siblings().show('');
}
但是运气不好,它不起作用。这是我的js小提琴 fiddle
任何帮助将不胜感激
答案 0 :(得分:2)
由于冒泡,显示按钮将触发两个功能, 如果单击的元素不是显示按钮,则需要触发第一个功能
<div class="row" id="row1" onclick="cc(event,1)">
function cc(event,id) {
if(!$(event.target).is('.btn-dis')) {
$('#row' + id).siblings().hide('slow');
$(".btn-dis").css("display", "block")
}
}
答案 1 :(得分:1)
您的代码不错,但很简单,当您单击显示按钮然后显示目标元素时,它又被隐藏了,因为您的按钮父元素触发了单击事件,您在其中进行隐藏。您必须通过带有 event 和 id 的显示按钮,然后目标函数才能使用preventDefault
和stopPropagation
,您可以了解更多{{3} }
function cc(event, id) {
event.preventDefault();
event.stopPropagation();
$('#row' + id).siblings().hide('slow');
$(".btn-dis").css("display", "block")
}
function clickInline(event, id) {
event.preventDefault();
event.stopPropagation();
$('#row' + id).siblings('.row').css('display', 'flex');
$(".btn-dis").css("display", "none")
}
function Expandcollapse(event, id) {
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row>[class*='col-'] {
display: flex;
flex-direction: column;
}
.DC {
border: 1px solid #bf7708;
padding: 15px;
margin: 4px;
color: #575757;
background-color: #e88d00;
border-radius: 8px;
width: 120px;
}
.table-hed {
border: 1px solid #008cf3;
background-color: #008cf3;
color: #fff;
padding: 10px;
width: 147px
}
.bord-lin {
border: 1px solid black;
}
.h-styl {
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
text-align: center;
}
.teams {
border-top: 1px solid #060606;
padding: 10px;
text-align: center;
min-height: 180px;
width: 150px
}
a {
color: #fff;
text-decoration: none;
}
.btn-dis {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="">
<button onclick="cc(event,2)">dddd</button>
<div class="col-md-9">
<div class="row">
<div class="bread">
<div id="bc1" class="btn-group btn-breadcrumb">
<a href="http://localhost/manage/manage/" class="btn btn-default">
<i class="fa fa-home"></i></a>
<a href="" class="btn btn-default">
<div>PI board</div>
</a>
</div>
</div>
<div class="row">
<div class="reg-form">
<div class="bulk">
<div class="col-md-4">
<h3 style="padding-left:1.2%">PI board</h3>
</div>
<div class="col-md-6" style="
margin-left: -13%;
margin-top: 2%;
">
</div>
<div class="col-md-2 enq-btn"><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-envelope"></i>new features</a></div>
<div class="clearfix"></div>
</div>
<div class="form clearfix">
<form name="registration1_form" id="registration1_form" method="POST" action="http://localhost/manage/products/deleteaboutsusall" enctype="multipart/form-data">
<div>
<div class="container" style="padding-bottom:70px">
<div class="row ">
<div class="col-sm-3 table-hed">Tasks
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-2 table-hed">Teams
</div>
<div class="col-sm-5 table-hed">
<a href="http://localhost/manage/scrum/TeamscrumBorad/2" /> sprint2 </a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3 bord-lin formContainerBoxT1">
<div class="row ">
<div class="col-md-12 col-sm-6 col-xs-12 mb-3 text-ellipsis prop-win-label-cls draggableCompClassT1 DC" data-story_id="7" data-team-id="0" data-sprint-id="0">
<div class="col-sm-12 h-styl">
<b class="" id="content-7">asas</b>
</div>
<div class="col-md-12">
<button type="button" id="pop-7" onClick="popfeatureEdit(7)" class="btn btn-primary btn-xs"><span class="fa fa-edit"></span> </button>
<p class="blog-post-bottom pull-right">
<a class="delete btn btn-primary btn-xs" href="http://localhost/manage/scrum/deletefeature/7_1" style="float:right"> <span class="fa fa-trash"></span> </a>
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="row" id="row1" onclick="cc(event,1)">
<div class="col-md-2 teams bord-lin" id="team1">
<div style="height:140px">
Malabar
</div>
<button type="button" class="btn btn-primary btn-xs btn-dis" onclick="clickInline(event,1)">Show
</button>
</div>
<div id="teamz1" class="col-md-5 teams bord-lin formContainerBoxT1" data-team-id="1" data-sprint-id="2">
<div class="col-md-12 col-sm-6 col-xs-12 mb-3 text-ellipsis prop-win-label-cls draggableCompClassT1 DC ui-draggable ui-draggable-handle" data-story_id="7" data-team-id="0" data-sprint-id="0">
<div class="col-sm-12 h-styl">
<b class="" id="content-7">asas</b>
</div>
<div class="col-md-12">
<button type="button" id="pop-7" onclick="popfeatureEdit(7)" class="btn btn-primary btn-xs"><span class="fa fa-edit"></span> </button>
<p class="blog-post-bottom pull-right">
<a class="delete btn btn-primary btn-xs" href="http://localhost/manage/scrum/deletefeature/7_1" style="float:right"> <span class="fa fa-trash"></span> </a>
</p>
</div>
</div>
</div>
</div>
<div class="row" id="row2" onclick="cc(event,2)">
<div class="col-md-2 teams bord-lin" id="team2" onclick="Expandcollapse(2)">
<div style="height:140px">
Pazhassi
</div>
<button type="button" id="mybutton" class="btn btn-primary btn-xs btn-dis" onclick="clickInline(event,2)">Show
</button>
</div>
<div id="teamz2" class="col-md-5 teams bord-lin formContainerBoxT1" data-team-id="2" data-sprint-id="2">
<div class="col-md-12 col-sm-6 col-xs-12 mb-3 text-ellipsis prop-win-label-cls draggableCompClassT1 DC ui-draggable ui-draggable-handle" data-story_id="6" data-team-id="2" data-sprint-id="2">
<div class="col-sm-12 h-styl">
<b class="" id="content-6">zxz</b>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-primary btn-xs" id="pop-6" onClick="popfeatureEdit(6)"><span class="fa fa-edit"></span> </button>
<button type="button" class="btn btn-primary btn-xs pull-right"><span class="fa fa-trash"></span> </button>
</div>
</div>
<div class="col-md-12 col-sm-6 col-xs-12 mb-3 text-ellipsis prop-win-label-cls draggableCompClassT1 DC ui-draggable ui-draggable-handle" data-story_id="8" data-team-id="2" data-sprint-id="2">
<div class="col-sm-12 h-styl">
<b class="" id="content-8">shanua</b>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-primary btn-xs" id="pop-8" onClick="popfeatureEdit(8)"><span class="fa fa-edit"></span> </button>
<button type="button" class="btn btn-primary btn-xs pull-right"><span class="fa fa-trash"></span> </button>
</div>
</div>
</div>
</div>
<div class="row" id="row3" onclick="cc(event,3)">
<div class="col-md-2 teams bord-lin" id="team3" onclick="Expandcollapse(3)">
<div style="height:140px">
Travancore
</div>
<button type="button" id="show" class="btn btn-primary btn-xs btn-dis" onclick="clickInline(event,3)">Show
</button>e </div>
<div id="teamz3" class="col-md-5 teams bord-lin formContainerBoxT1" data-team-id="3" data-sprint-id="2">
<div class="col-md-12 col-sm-6 col-xs-12 mb-3 text-ellipsis prop-win-label-cls draggableCompClassT1 DC ui-draggable ui-draggable-handle" data-story_id="11" data-team-id="3" data-sprint-id="2">
<div class="col-sm-12 h-styl">
<b class="" id="content-11">shanu testing</b>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-primary btn-xs" id="pop-11" onClick="popfeatureEdit(11)"><span class="fa fa-edit"></span> </button>
<button type="button" class="btn btn-primary btn-xs pull-right"><span class="fa fa-trash"></span> </button>
</div>
</div>
</div>
</div>
-谢谢-