常见问题切换添加选择器

faq toggle adding selector

本文关键字：选择器 添加 常见问题      更新时间：2023-09-26

我有切换常见问题解答。

当我单击" +"时，它会回答并显示/隐藏它。

如果我单击" + "以及问题标题，我想进行切换。

问题：

如何使用h3元素（问题标题）和/或 *+* 按钮切换答案？

.HTML：

<div class="box boxFaq clearfix">                  
    <div class="boxTitle">
        <h3>Question</h3>
    </div>
    <button class="clearfix">+</button>
    <div style="clear: both;"></div>
    <div class="boxContent clearfix toggle">                     
        Answer answer answer                                                                    
    </div>
</div>

.JS：

jQuery(document).ready(function() {
    jQuery('button').click(function() {
        jQuery(this).next().next('.toggle').slideToggle();
        if (jQuery(this).text() === '+') {
            jQuery(this).html('-');
        }
        else {
            jQuery(this).html('+');
        }
    });
});

您可以通过用,分隔来包含多个选择器。然后，您只需要稍微修改处理程序的逻辑即可同时适用于这两个元素。试试这个：

jQuery('.boxFaq button, .boxFaq h3').click(function() {
    var $parent = jQuery(this).closest('.boxFaq');
    var $btn = $parent.find('button')
    $parent.find('.toggle').slideToggle();
    $btn.text($btn.text() === '+' ? '-' : '+');
});

示例小提琴

另请注意，我将+/-逻辑修改为简单的三元表达式。

 if (jQuery(this).text() === '+') {
            $('h3').text('Answer');  //Change the text here
            jQuery(this).html('-');  
        }
        else {
            jQuery(this).html('+');
            $('h3').text('Question');  //Again here
        }

检查这个小提琴

修改你的 HTML 代码

<div class="boxContent clearfix toggle" style="display: none;">                     
        Answer answer answer                                                                    
    </div>

修改你的查询代码

jQuery(document).ready(function() {
    jQuery('button').click(function() {
        jQuery(this).next().next().slideToggle();
        if (jQuery(this).text() === '+') {
            jQuery(this).html('-');
        }
        else {
            jQuery(this).html('+');
        }
    });
});

检查这个更新的小提琴

将 h3 添加到选择器。并使用parents()或closest() 

 jQuery(document).ready(function() {
  jQuery('h3,button').click(function() {
     var $parent=jQuery(this).parents('.boxFaq');
    $parent.find('.toggle').slideToggle();
    if ($parent.find('button').text() === '+') {
        jQuery(this).html('-');
    }
    else{
        jQuery(this).html('+');
    }
   });
 });
相关文章：