Как создать этот аккордеон с несколькими динамическими идентификаторами и кнопкой закрытия?
Я хочу создать аккордеон. Когда я нажимаю «Показать», я хочу, чтобы текст «Показать» был скрыт, а отображались содержимое и кнопка «закрыть». Когда я нажимаю «закрыть», я хочу скрыть содержимое и кнопку «закрыть» и показать кнопку «Показать».
Каждый текст должен быть в HTML, а не в JS. Но я подключаю это к сообщениям с динамическими идентификаторами Wordpress, чтобы отображать и скрывать больше контента на странице индекса.
Это моя попытка, но кнопка «Закрыть» не работает.
Это должно работать с несколькими элементами идентификатора, потому что я подключаю это к странице сообщений индекса Wordpress.
Могу ли я добавить, чтобы изменить класс для этих кнопок «показать / закрыть»? Я хочу, чтобы если я нажму родительский элемент кнопки «Показать», другой элемент изменит класс, а если я нажму родительский элемент кнопки «Закрыть», другой элемент изменит класс?
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
var $target = $('#' + this.id + 'show').show();
$contents.not($target).hide();
});.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "tab1" class = "tab">Show 1</div>
<div id = "tab1show" class = "tab-content">
content 1
<div class = "close">close</div>
</div>
<br><br><br>
<div id = "tab2" class = "tab">Show 2</div>
<div id = "tab2show" class = "tab-content">
content 2
<div class = "close">close</div>
</div>Вы можете добавить обработчик для этой скрипки?
вы просто просите других людей сделать ту работу, которую вы, очевидно, можете сделать
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Для этого добавьте событие на .close.
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
var $target = $('#' + this.id + 'show').show();
$(this).hide();
});
$('.close').click(function(){
$(this).parent().hide();
let parentId = $(this).parent().attr('id');
parentId = parentId.replace('show','');
$('#'+parentId).show();
});.tab {background:red; max-width:100px; cursor: pointer;}
.close {border: 1px solid red; max-width:100px; cursor: pointer;}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "tab1" class = "tab">Show 1</div>
<div id = "tab1show" class = "tab-content">
content 1
<div class = "close">close</div>
</div>
<br><br><br>
<div id = "tab2" class = "tab">Show 2</div>
<div id = "tab2show" class = "tab-content">
content 2
<div class = "close">close</div>
</div>
<br><br><br>не работают. Когда я нажимаю Показать 2, шоу 1 исчезает.
Я обновил фрагмент, попробуйте сейчас.
хорошо, спасибо, но когда я нажимаю кнопку show1 из post1, я хочу добавить класс в post1 динамически с именем .long и динамически добавить .long в post2, когда я нажимаю show2 jsfiddle.net/udr01vsq/32
Вы также должны добавить событие щелчка для кнопки close, например:
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
removeNewClass();
var $target = $('#' + this.id + 'show').show();
var newClass = 'post' + this.id.split('tab')[1] + 'long';
$(this).hide().parent().addClass(newClass);
$('.tab').show();
$contents.not($target).hide();
});
$('.close').click(function() {
removeNewClass();
$(this).parent().hide();
$(this).parent().prev('.tab').show();
var $target = $(this).parent();
});
function removeNewClass() {
$contents.each(function() {
var id = $(this).attr('id');
var postClass = 'post' + id.split('tab')[1];
$(this).parent().attr("class", postClass);
});
}.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "post1">
<div id = "tab1" class = "tab">Show 1</div>
<div id = "tab1show" class = "tab-content">
content 1
<div class = "close">close</div>
</div>
</div>
<br><br><br>
<div class = "post2">
<div id = "tab2" class = "tab">Show 2</div>
<div id = "tab2show" class = "tab-content">
content 2
<div class = "close">close</div>
</div>
<br><br><br>
</div>не работают. Когда я нажимаю «Показать 1» и «Показать 2», шоу 1 исчезает.
Исправлена проверка сейчас, пожалуйста
хорошо, спасибо, но когда я нажимаю кнопку show1 из post1, я хочу добавить класс в post1 динамически с именем post1long и динамически добавить post2long в post2, когда я нажимаю show2 jsfiddle.net/udr01vsq/25
Проверьте это обновление jsfiddle.net/z_acharki/udr01vsq/36, вы хотите удалить их, когда мы нажимаем закрыть?
Поехали, проверьте это обновление jsfiddle.net/z_acharki/udr01vsq/55
Хорошо, но когда я нажимаю show1 или show2, красный div с текстом show1 или show2 не скрывает jsfiddle.net/udr01vsq/61
Попробуй это:
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
var $target = $('#' + this.id + 'show').show().addClass('long');
$('.tab').show();
$contents.not($target).hide().removeClass('long');
$(this).hide();
});
$('.close').click(function() {
var tab = $('#' + $(this).attr('data-tab'));
var tabContent = $(this).parent();
tab.show();
tabContent.hide();
});.tab {background:red; max-width:100px; cursor: pointer;}
.close {border: 1px solid red; max-width:100px; cursor: pointer;}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "tab1" class = "tab">Show 1</div>
<div id = "tab1show" class = "tab-content">
content 1
<div class = "close" data-tab = "tab1">close</div>
</div>
<br><br><br>
<div id = "tab2" class = "tab">Show 2</div>
<div id = "tab2show" class = "tab-content">
content 2
<div class = "close" data-tab = "tab2">close</div>
</div>
<br><br><br>не работает. Если я нажму "Показать 1" и "Показать 2" покажу 1, будет скрыто.
хорошо, спасибо, но когда я нажимаю кнопку show1 из post1, я хочу добавить класс в post1 динамически с именем post1long и динамически добавить post2long в post2, когда я нажимаю show2 jsfiddle.net/udr01vsq/25
Просто используйте событие закрытия, например,
$('.close').on('click',function(){
$(this).closest('.tab-content').hide();
});
Фрагмент,
var $contents = $('.tab-content');
$contents.slice().hide();
$('.tab').click(function() {
var $target = $('#' + this.id + 'show').show();
post = $target.closest('.post');
post.addClass(post.attr('data-classes') + 'long');
$allTargets = $contents.not($target);
$allTargets.each(function() {
post = $(this).closest('.post');
post.removeClass(post.attr('data-classes') + 'long');
$(this).hide();
});
});
$('.close').on('click', function() {
$(this).closest('.tab-content').hide();
});.tab {
background: red;
max-width: 100px;
cursor: pointer;
}
.close {
border: 1px solid red;
max-width: 100px;
cursor: pointer;
}
[class$='long'] .tab {
color: #FFF;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "post1 post" data-classes='post1'>
<div id = "tab1" class = "tab">Show 1</div>
<div id = "tab1show" class = "tab-content">
content 1
<div class = "close">close</div>
</div>
</div>
<br><br><br>
<div class = "post2 post" data-classes='post2'>
<div id = "tab2" class = "tab">Show 2</div>
<div id = "tab2show" class = "tab-content">
content 2
<div class = "close">close</div>
</div>
</div>
<br><br><br>хорошо, спасибо, но когда я нажимаю кнопку show1 из post1, я хочу добавить класс в post1 динамически с именем .long и динамически добавить .long в post2, когда я нажимаю show2 jsfiddle.net/udr01vsq/32
Я обновил свой фрагмент в соответствии с вашим комментарием. [Кстати, это еще один вопрос, который нужно задать SO.]
когда я нажимаю закрыть класс, он не удаляется из этого, а текст Show1 все еще белый. Вы можете это исправить? Спасибо!
У вас нет обработчика кликов для кнопки закрытия.
$('.close').click(...