Question

我有一个列表结构，如下所示：

<ul class="categories_video">
    <li class="sanea_test">
         <h3 class="h3_clickme">some text</h3>
         <ul></ul>
    </li>
</ul>
<ul class="categories_video">
    <li class="sanea_test">
         <h3 class="h3_clickme">some text</h3>
         <ul></ul>
    </li>
</ul>
<ul class="categories_video">
    <li class="sanea_test">
         <h3 class="h3_clickme">some text</h3>
         <ul></ul>
    </li>
</ul>

我想要实现的是：当点击H3时，H3旁边的UL必须显示：block（此时显示：none）......

我试着写这样的东西，但它只是不想按原样工作:(

jQuery('.h3_clickme').on('click', function (evt) {
    var $button = jQuery(this);
    var $ul = $button.closest('ul');
    var $div = $ul.find('.sanea_test');
    jQuery('.sanea_test').not($div).hide();
    $div.toggle();
 });

请有人帮我解决这个问题。非常感谢!!

Answer 1

跳转到已点击的h3的父级，并在其中找到ul。

$(".h3_clickme").click(function(){
    $(this).closest(".sanea_test").find("ul").toggle();
});

See DEMO here.

Answer 2

你可以找到h3 parent然后找到ul并切换它

jQuery('.h3_clickme').on('click', function (evt) {       
    var $this = $(this).parent().find('ul').toggle();
    $("li ul").not($this).hide();
 });

li ul { display: none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories_video">
    <li class="sanea_test">
         <h3 class="h3_clickme">some text</h3>
         <ul>a</ul>
    </li>
</ul>
<ul class="categories_video">
    <li class="sanea_test">
         <h3 class="h3_clickme">some text</h3>
         <ul>b</ul>
    </li>
</ul>
<ul class="categories_video">
    <li class="sanea_test">
         <h3 class="h3_clickme">some text</h3>
         <ul>c</ul>
    </li>
</ul>

Answer 3

请参阅jQuery.next()以选择下一个同级元素。

$(".h3_clickme").click(function(){
    $(this).next().toggle();
});

单击按钮上的jQuery，显示父单击按钮的特定div

3 个答案: