#javascript #html #jquery #css
#javascript #HTML #jquery #css
Вопрос:
Мне понадобились три панели, чтобы показать или скрыть часть его содержимого в зависимости от того, была ли нажата кнопка (тег p), а затем изменить текст кнопки при нажатии, чтобы сказать скрыть или показать в зависимости от ситуации. Однако скрытое содержимое должно быть автоматически скрыто на мобильных устройствах, поэтому я добавил для этого некоторый javascript, но теперь изменение текста кнопки происходит неправильно с момента его срабатывания при нажатии. Вместо этого я хотел бы, чтобы текст кнопки менялся, если добавлен класс ‘clicked-hide’, и возвращался обратно, если это не так. Помощь была бы признательна 🙂
HTML
<div class="col-sm compare-card">
<div class="compare-card-header">
<h4 style="display:inline-block">Title</h4>
<a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
</div>
<div class="compare-card-balance">
<p class="benefit-title">title</p>
<p class="f-14">subtitle</p>
</div>
<div class="compare-card-attributes">
text here
</div>
<div class="compare-card-footer">
<p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
</div>
</div>
<div class="col-sm compare-card">
<div class="compare-card-header">
<h4 style="display:inline-block">Title</h4>
<a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
</div>
<div class="compare-card-balance">
<p class="benefit-title">title</p>
<p class="f-14">subtitle</p>
</div>
<div class="compare-card-attributes">
text here
</div>
<div class="compare-card-footer">
<p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
</div>
</div>
<div class="col-sm compare-card">
<div class="compare-card-header">
<h4 style="display:inline-block">Title</h4>
<a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
</div>
<div class="compare-card-balance">
<p class="benefit-title">title</p>
<p class="f-14">subtitle</p>
</div>
<div class="compare-card-attributes">
text here
</div>
<div class="compare-card-footer">
<p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
</div>
</div>
Javascript
//COMPARISON CARD SCRIPT---------------
//This wll show and hide the card attributes section inside the card
jQuery('.hide-show-attributes').on('click', function() {
jQuery('.compare-card-attributes').toggleClass('clicked-hide');
});
//This will toggle the text on the show hide p tag button messaging
jQuery(document).ready(function($) {
$('.compare-card-footer').find(".hide-show-attributes").click(function(){;
if($(this).find("span.toggleShow").first().text()=="Hide Details"){
$("span.toggleShow").text("Show Details");
}
else {
$("span.toggleShow").text("Hide Details");
}
});
});
//Mobile Switch - this will auto collapse the panel when the user is on mobile
if($(window).width()<600){
$(".compare-card-attributes").addClass("clicked-hide");
$('span.toggleShow').text('Show Details');
}
else {
$(".compare-card-attributes").removeClass("clicked-hide");
}
// this is used whenever the window is resized
$(window).resize(function(){
if($(window).width()<600){
$(".compare-card-attributes").addClass("clicked-hide");
}
else {
$(".compare-card-attributes").removeClass("clicked-hide");
}
});
//END COMPARISON CARD SCRIPT---------------
Ответ №1:
Прежде всего, я предлагаю вам установить .compare-card-attributes как скрытые на мобильных устройствах с помощью CSS
@media only screen and (max-width: 600px) {
.compare-card-attributes {
visibility: hidden;
}
}
а также иметь класс чего-то вроде
.hidden {
visibility: hidden;
}
тогда ваш скрипт должен быть (при условии, что эти методы jquery уже работают)
jQuery('.hide-show-attributes').on('click', function() {
const cardAttributes = $('.compare-card-attributes');
const toggleText = $(this).find("span.toggleShow").first();
cardAttributes.toggleClass('hidden');
if(cardAttributes.hasClass("hidden")){
toggleText.text("Show Details");
}
else {
toggleText.text("Hide Details");
}
});
Я написал это вслепую, поэтому надеюсь, что это сработает / поможет.
Я предлагаю вам также использовать более семантический элемент для вашего переключателя, например, button или div с атрибутом ‘role = button’.
Комментарии:
1. извините, моя цель — не скрыть кнопку, а динамически изменять текст кнопки в зависимости от того, присутствует ли класс .clicked-hide в div .compare-card-attributes
2. Извините, у меня не совсем работает, плюс мне нужно, чтобы все панели отображались или скрывались на основе любого нажатия кнопки, они не должны действовать как отдельные лица… Чего я хочу достичь (в действительно дерьмовых логических терминах), так это чего-то вроде этого if ($(«.compare-card-attributes»).hasClass(«.clicked-hide»)); { $(«span.toggleShow»).text(«Показать детали»);} else { $(«span.toggleShow»).text(«Скрыть детали»); } }
3. Ах, если вам нужно, чтобы все они происходили одновременно, это проще. Я отредактировал ответ. Мне нужно будет самому проверить этот код завтра, если проблема все еще существует.