Question

我正在处理网站的常见问题解答页面，并且只想显示答案以节省页面上的空间。当点击一个问题时，答案应该在它下面折叠，当再次点击时，答案应该再次隐藏。

所以一切都很好。这些问题很好地排列在一起，看起来都很合适。当悬停在问题上方时，我有一个灰色区域折叠，加上问题本身变得大胆。现在我的问题是：

如何将悬停事件更改为点击事件？

我尝试过实现几个javascripts而没有任何成功。希望有人知道这样做的方法。

这是一个JSFIDDLE示例：http://jsfiddle.net/Lookinggoodtoday/wPVZp/

此致的Jeroen

    * 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>

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

Answer 1

我已经更新了小提琴。将悬停更改为＆＃34;活动＆＃34;。它的行为是鼠标点击。我的建议是添加JavaScript以使您的工作更轻松。这是fiddle。

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

单击按钮时使用

激活。

Answer 2

您可以向这些元素添加点击事件（这当然会介绍一些Javascript）。

我已经编辑了jsfiddle来合并它。请注意，我已经包含了jQuery库，如果你想使用这个解决方案，你也会这样做。

http://jsfiddle.net/wPVZp/9/

$(".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");
    }
});

将我弹出的q / answer事件从hover更改为click

2 个答案: