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

试试这个:

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

仅仅引用 div 的 ID 并不能获得对该 div 的引用。您可以使用 document.getElementById() 来引用 div，然后设置 className。

如果您使用的是 jQuery，这可能更有意义:

更新:对于动态 div 和 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();

    } );

} );