Javascript 将我的弹出q/应答事件从悬停更改为单击

我正在一个网站的faq页面上工作，只想显示答案以节省页面空间。当点击一个问题时，答案应在其下方折叠，当再次点击时，答案应再次隐藏

所以一切都很顺利。问题排得很好，看起来都很恰当。当我把鼠标悬停在问题上时，会有一个灰色区域折叠起来，加上问题本身会变得粗体。现在回答我的问题：

如何将悬停事件更改为单击事件

我尝试过实现几个Javascript，但没有成功。希望有人知道这样做的方法

下面是一个JSFIDLE示例：

问候,， 杰罗恩

---

我已经更新了小提琴。将悬停更改为活动。它的作用是鼠标点击。 我的建议是添加JavaScript，使您的工作更轻松。 这是你的电话号码

---

单击按钮时使用active。您可以向这些元素添加单击事件。这当然会引入一些Javascript

我已经编辑了JSFIDLE来合并这个。请注意，我已经包括jQuery库，如果您希望使用此解决方案，您也将包括jQuery库

---

谢谢你，Nyxem！这是一个非常迅速的反应和解决的小提琴。至于效果：弹出部分是否可能在再次单击之前保持可见？这不是仅仅在按住鼠标按钮时才可见吗？谢谢你。我已经添加了你的代码，得到了这样的信息：如果它是点击打开，点击关闭，那就好了。而不是按住按钮使其保持打开状态。同样在Chrome上，它对我来说也很好，但在iexplore上，它却不行。谢谢Aaron，这正是我想要的效果。现在，我想知道如何实现这个Jquery库，因为我在其中有0个经验。因此，我在head标记之间有以下行：lookinggoodtoday.com/js/Jquery-1.11.1.min.js>并将代码添加到body区域，但它似乎不起作用。你知道我做错了什么吗？你应该去访问，然后把文件保存到你想保存脚本的地方。之后，只需包含一个src等于jquery文件在文件结构中放置位置的脚本标记。这比链接到另一个站点上存储的脚本要好。

    * VRAAG & ANTWOORD TYPE DROPDOWN BOX */
    <style type="text/css"> 
.dropdown-menu 
{
    margin-bottom: 8px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 910px; 
    background-color:#fff; 
    display:block; 
    display: inline-table; 
 }

.dropdown-menu .menu-item {display: none; }

.dropdown-menu .vraag 
{
    display: table-cell; 
    background-color:#fff; 
    text-decoration: none; 
    font:verdana; 
    color: #777; 
    font-size: 13px; 
    padding-left: 15px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    vertical-align: middle; 
    cursor: pointer;
}

.dropdown-menu .vraag:hover 
{
    display: table-cell; 
    background-color:#fff; 
    text-decoration: none; 
    font:verdana; 
    color: #777;    
    font-size: 13px; 
    padding-left: 15px; 
    padding-top: 8px;  
    padding-bottom: 8px; 
    vertical-align: middle; 
    cursor: pointer;
}

.dropdown-menu:hover .menu-item {display: table-row;}

.dropdown-menu .menu-item.active {display: table-header-group;}

.dropdown-menu .antwoord 
{
    margin-bottom: 20px; 
    border-radius: 0px 0px 40px;
    letter-spacing:20%; 
    line-height:200%; 
    display: table-header-group; 
    font:verdana; 
    font-weight: normal; 
    background-color:#fff; 
    font-size: 12px; 
    display:block; 
    padding-left: 27px; 
    padding-right: 27px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    font-color: #777; 
    text-decoration: none; 
    background-color:#f9f9f9;
}

.dropdown-menu .antwoord:hover 
{
    display: table-header-group; 
    margin-bottom: 20px; 
    border-radius: 0px 0px 40px;
    letter-spacing:20%; 
    line-height:200%; 
    display: table-header-group; 
    font:verdana; 
    font-weight: normal; 
    background-color:#fff; 
    font-size: 12px; 
    display:block; 
    padding-left: 27px; 
    padding-right: 27px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    font-color: #777; 
    text-decoration: none; 
    background-color:#f9f9f9; 
    vertical-align: middle;
}
</style> 
/* -----------------------------------*/

        <!--- VRAAG & ANTWOORD TYPE DROPDOWN BOX  --->

<ul class = "dropdown-menu">
    <li class = "menu-item">
        <a  class = "antwoord"><p>&nbsp;</p> Wanneer een artikel op uitverkocht staat of niet in uw maat leverbaar is betekend dit dat wij het artikel niet meer kunnen leveren. Wilt u het artikel alsnog graag bestellen dan kunt u contact met de klantenservice opnemen. Wanneer u het artikelnummer aan ons doorgeeft zullen wij u op de hoogte brengen of en wanneer dit artikel weer leverbaar zal zijn. </p><p>&nbsp;</p></a>


  </li>
    <li class = "active menu-item">
        <a  class = "vraag"> > Het artikel staat op uitverkocht / is niet in mijn maat leverbaar, kan ik dit artikel nog bestellen?</a>
    </li>     
</ul>

<!------------------------------------------->

button:hover { background-color: lime; }
button:active { background-color: fuchsia; }
button:focus { background-color: yellow; }

$(".dropdown-menu").click(function() {
    if ($(this).hasClass("active-question")){
        $(this).children('li:not(.active)').hide();
        $(this).removeClass("active-question");
    }else{
        $(this).children('li:not(.active)').show();
        $(this).addClass("active-question");
    }
});