Question

我有4个段落和4个图标，默认情况下该段落是隐藏的，并且我想使它们相对于单击哪个图标可见。 paragraph are visible here

    <div class="challenge">
        <span class="fa-stack fa-1x" onclick=toggleIcon(this)>
            <i class="fas fa-square fa-stack-2x"></i>
            <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
        </span>
        <div class="challenges-heading"><h3>Hand us your toughest challenges</h3></div> 
        <p class="challenges-text">Looking for a custom software or mobile solution? With over a decade of software development experience, we will work with you to create solutions that can help you achieve your goals.</p>
    </div>
    <div class="challenge">
        <span class="fa-stack fa-1x onclick=toggleIcon(this)">
            <i class="fas fa-square fa-stack-2x"></i>
            <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
        </span>
        <div class="challenges-heading"> <h3>Get solutions that let your scale</h3></div>
        <p>Quo cu accumsan oporteat neglegentur, reque aeterno consetetur his an. An sanctus sententiae interesset mel, at vis affert iracundia eloquentiam. Dico molestie lucilius at vel. Duo ut quas liber insolens.</p>
    </div>
    <div class="challenge">
        <span class="fa-stack fa-1x" onclick=toggleIcon(this)>
            <i class="fas fa-square fa-stack-2x"></i>
            <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
        </span>
        <div class="challenges-heading"> <h3>A seamless</h3></div>
        <p>Lorem ipsum dolor sit amet, convenire conclusionemque eu vim, mea simul ullamcorper id. Ipsum tamquam te vix. Et unum quidam duo. Democritum dissentiet ne qui, elitr dignissim percipitur quo te.</p>
    </div>
    <div class="challenge">
        <span class="fa-stack fa-1x" onclick=toggleIcon(this)>
            <i class="fas fa-square fa-stack-2x"></i>
            <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
        </span>
        <div class="challenges-heading"> <h3>Flexibility to Innovate</h3></div>
        <p class="challenges-text">Melius dissentiet nam ne, vel ei graeco elaboraret, has ei suas oblique pertinacia. Nam cu legendos petentium instructior, voluptua indoctum cum at, dicam tractatos sea te. Eum ne iusto dolores dissentiunt.</p>
    </div>

我尝试使用JS，但它会切换所有段落

function toggleIcon() {
    $(".challenge .fa-inverse").toggleClass("fa-plus fa-minus")
    $(".challenge p").toggle();
}

Answer 1

尝试此代码

$(".tooglebtn").on("click",function(){
       $(this).closest('div').find('p').toggleClass("open");
        
    });

   .challenge p{
        display:none;
    }
    .challenge p.open{
        display: block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="challenge">
            <span class="fa-stack fa-1x tooglebtn" >ICON
                <i class="fas fa-square fa-stack-2x"></i> 
                <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
            </span>
            <div class="challenges-heading"><h3>Hand us your toughest challenges</h3></div> 
            <p class="challenges-text" >Looking for a custom software or mobile solution? With over a decade of software development experience, we will work with you to create solutions that can help you achieve your goals.</p>
        </div>
        <div class="challenge">
            <span class="fa-stack fa-1x tooglebtn" > ICON
                <i class="fas fa-square fa-stack-2x"></i> 
                <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
            </span>
            <div class="challenges-heading"> <h3>Get solutions that let your scale</h3></div>
            <p>Quo cu accumsan oporteat neglegentur, reque aeterno consetetur his an. An sanctus sententiae interesset mel, at vis affert iracundia eloquentiam. Dico molestie lucilius at vel. Duo ut quas liber insolens.</p>
        </div>
        <div class="challenge">
            <span class="fa-stack fa-1x tooglebtn">ICON
                <i class="fas fa-square fa-stack-2x"></i> 
                <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
            </span>
            <div class="challenges-heading"> <h3>A seamless</h3></div>
            <p>Lorem ipsum dolor sit amet, convenire conclusionemque eu vim, mea simul ullamcorper id. Ipsum tamquam te vix. Et unum quidam duo. Democritum dissentiet ne qui, elitr dignissim percipitur quo te.</p>
        </div>
        <div class="challenge">
            <span class="fa-stack fa-1x tooglebtn">ICON
                <i class="fas fa-square fa-stack-2x"></i> 
                <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
            </span>
            <div class="challenges-heading"> <h3>Flexibility to Innovate</h3></div>
            <p class="challenges-text">Melius dissentiet nam ne, vel ei graeco elaboraret, has ei suas oblique pertinacia. Nam cu legendos petentium instructior, voluptua indoctum cum at, dicam tractatos sea te. Eum ne iusto dolores dissentiunt.</p>
        </div>

Answer 2

尝试以下代码：

var toggleIcon = function(el) {
  if (!el.parentNode.childNodes[5].style.visibility){
    el.parentNode.childNodes[5].style.visibility = "hidden";    
  } else {
    el.parentNode.childNodes[5].style.visibility = "";  
  }
}

这是toggleIcon(this)函数定义。

我还没有写图标更改代码。

如何根据单击的图标显示段落

2 个答案: