Question

我有一个使用dl，dt的FAQ脚本。 dd：

$('.faqs dd').hide(); // Hide all DDs inside .faqs
$('.faqs dt').hover(function(){
    $(this).addClass('hover' , 'slow')},function(){
        $(this).removeClass('hover' , 'slow')}).click(function(){ 
        // Add class "hover" on dt when hover
        $(this).next().slideToggle('normal'); // Toggle dd when the respective dt is clicked
    });

html看起来像这样：

<dl class="faqs">
    <dt>question 1 <button class="btn btn-primary btn-xs pushme">open answer</button></dt>
    <dd>answer 1</dd> 
</dl>

虽然点击问题会打开我要添加按钮的答案。（因为问题很长，我不确定用户是否知道他/她需要点击问题）。

我要做的是根据dd的状态或按钮类和dt共享的click事件将按钮文本从“打开”更改为“关闭”。我试过了：

$('.faqs dt, .pushme').click(function () {
    $('.pushme').text(function(i, v){
        return v === 'open' ? 'close' : 'open'
    })
});

但仅适用于第一个选择器（.facs dt）我也试过检查dd是否显示：none / block并用.html（）更改按钮但是这对我没用。

人

Answer 1

您需要定位当前常见问题解答中的pushme元素，因此请尝试

$('.faqs dd').hide(); // Hide all DDs inside .faqs
$('.faqs dt').hover(function () {
    $(this).addClass('hover', 'slow')
}, function () {
    $(this).removeClass('hover', 'slow')
}).click(function () {
    $(this).next().stop(true, true).slideToggle('normal');
    $(this).find('.pushme').text(function (_, text) {
        return text == 'open answer' ? 'close answer' : 'open answer'
    })
});

演示：Fiddle

单击事件上的两个选择器可更改按钮文本

1 个答案: