Jquery row.siblings работает неправильно
У меня есть функция js для скрытия и отображения братьев и сестер. Здесь в основном у меня 3 команды.
- Малабар
- Пажаси
- Траванкор
Здесь, когда вы нажмете на малабарский div Pazhassi и Travancore, исчезнет (то есть: мне нужны только детали малабарского div с кнопкой «Показать».)
И когда я нажимаю кнопку «Показать», он возвращается к своему первому представлению, что означает, что мне нужны все элементы div.
мой jquery
function clickInline(id)
{
$('#row'+id).siblings().show('');
}
Но не повезло, он не работает. вот моя скрипта js рабочий пример
Любая помощь могла бы быть полезна
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
1
0
38
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 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")
}
}
Ваш код хорош, но это простая ошибка: когда вы нажимаете кнопку «Показать», затем показываете целевые элементы, но он снова скрыт, потому что ваш родительский элемент кнопки вызывает событие щелчка, когда вы говорите, что скрываете их. Вам необходимо передать кнопку показа с мероприятие и я бы, затем целевая функция использует preventDefault и stopPropagation, вы можете узнать больше о https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/
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>-- Спасибо --
Другие вопросы по теме
Перебрать все содержимое папки, чтобы разместить ее на веб-сайте
Установите атрибут HTML img для привязки Angular
Ошибка приема; AttributeError: объект «NoneType» не имеет атрибута «приложение» при использовании render_template в операторе return
Почему псевдоэлемент ::before находится сверху в мобильном меню?
JavaScript (jQuery) иногда не работает, когда вы связываете его как отдельный файл
Использование React.memo с хуками для контролируемого ввода
Попытка создать страницу комикса
Python, BeautifulSoup — невозможно получить текст определенного элемента без его братьев и сестер
Как идеально подогнать содержимое под свойство flex?
Выровнять текст по вертикали
Похожие вопросы
Как переместить указатель полосы прокрутки (горизонтальный) в определенное место?
Если флажок установлен, но ввод пуст, отключите другой флажок
JavaScript (jQuery) иногда не работает, когда вы связываете его как отдельный файл
Ошибка: синхронный XMLHttpRequest в основном потоке устарел из-за его пагубных последствий для работы конечного пользователя
Динамическое отображение/скрытие столбцов с помощью JavaScript не работает
Скрытие значений параметров списка выбора при использовании jQuery Chosen
Контроллер asp.net mvc возвращает json List<T> неизвестная ошибка
Как я могу передать текущий термин таксономии поста, используя ajax?
Как использовать .clone() в цикле или для каждого элемента массива?
Скользящий div внутри карт Google