Question

我有以下标记：

<ul class="questions-answers">
    <li>
        <h3><a href="#">Question 1</a></h3>
        <div>Odio natoque est sagittis, elementum turpis porttitor velit amet? Aenean? Sociis tincidunt magnis natoque ultrices, nunc ultrices, elementum? Augue velit integer, elementum adipiscing. Integer mauris ultrices massa odio.</div>
    </li>
    <li>
        <h3><a href="#">Question 2</a></h3>
        <div>Tincidunt, tincidunt magna. Ultricies platea. Vel augue tempor sit scelerisque pulvinar! Nisi, auctor sed, lundium adipiscing aliquet, et magna? Arcu nec vut ultricies elementum odio sociis mauris sit?</div>
    <li>
    <!-- at least 7 more -->
</ul>

使用jQuery我需要实现的是，当单击一个a时，显示同一个li中的div并隐藏所有其他div。单击不同的a时，将显示该li中的div，并再次隐藏所有其他div。

希望有意义！

编辑以添加jQuery代码。

抱歉，我应该添加我的jQuery：

$('.questions-answers li div').hide();
$( ".questions-answers h3 a" ).click(function() {
   $('.questions-answers li div').hide();
   $(this).next("div").show();
});

Answer 1

问题是因为你已经将click处理程序绑定到anchor元素，下一个元素不是div，它是父h3元素的下一个兄弟

var $divs = $('.questions-answers li > div').hide();
$(".questions-answers li > h3 a").click(function () {

    var $div = $(this).parent().next("div").show();
    $divs.not($div).hide();
});

或将处理程序绑定到h3

var $divs = $('.questions-answers li > div').hide();
$(".questions-answers li > h3").click(function () {
    var $div = $(this).next("div").show();
    $divs.not($div).hide();
});

Answer 2

$('a').click(function(){
 $('ul').find('div').hide();
 $(this).parent('li').find('div').show();
});

我没有测试过，但希望能有效。

用jQuery为一个非常简单的手风琴提供动力

2 个答案: