jquery - 点击<p>时如何切换div类

Question

我有这个代码：

<p class="faqsli" onclick="faqs1.className='faqsanswer';">
  چگونه ایمیل دهی سایت را محدود کنم؟
</p>

<div id="faqs1" class="faqshide">sometext</div> 我的CSS！

.faqsli{
padding: 0px 16px 0px 0px;
background-repeat: no-repeat;
background-image: url(miniic_li.png);
background-position: right 5px;
}
.faqshide{
display:none;
}
.faqsanswer{
font-family:Tahoma, Geneva, sans-serif;
margin-right:25px;
}

它工作完美。

当有人单击该类时<p>，<div>该类会更改并向用户显示，但我也希望在第二次单击该类<div>时将其隐藏。<p>我必须做什么？

Answer 1

Try this instead:

<p class="faqsli" onclick="document.getElementById('faqs1').className='faqsanswer';">

Simply referring to the ID of the div does not get a reference to that div. You can use document.getElementById() to reference the div and then set the className.

If you're using jQuery this might make more sense:

UPDATE: For dynamic div and p

HTML

<p class="faqsli" data-div="faqs1">
    <!-- text here -->
</p>

<div id="faqs1" class="faqshide">
    <!-- other text here -->
</div>

JS

$( document ).ready( function () {

    $( document ).on( 'click', '.faqsli', function () {

        var id = $( this ).attr( 'data-div' );
        $( '#' + id ).toggle();

    } );

} );

Answer 2

toggleClass在点击事件上使用。

<p class="faqsli" onclick="$('#faqs1').toggleClass('faqsanswer faqshide');">
  چگونه ایمیل دهی سایت را محدود کنم؟
</p>

演示