Question

我有这个HTML：

                <ul>
                <a href="#"><li>Test</li></a>
                <a href="#"><li>Test2</li></a>
                <a href="#" class="with-sub"><li>Test3</li>
                    <ul class="sub">
                        <li><a href="#">Sub1</a></li>
                        <li><a href="#">Sub2</a></li>
                        <li><a href="#">Sub3</a></li>
                    </ul>
                </a>
            </ul>

和jQuery：

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    $( document ).ready(function() {
        $(".sub").hide();
    });
    $(".with-sub").click(function() {
        $(this).find(".sub").slideDown( "slow", function() {

        });
    });
</script>

当我点击带有“with-sub”类的链接时，没有任何反应。

Answer 1

您可以将html和jquery更改为以下内容：

＆＃13;

$(".with-sub").click(function() {
  $(this).next("ul").slideDown();
});

＆＃13;

.sub {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <a href="#">
    <li>Test</li>
  </a>
  <a href="#">
    <li>Test2</li>
  </a>
  <a href="#" class="with-sub">
    <li>Test3
      <ul class="sub">
        <li><a href="#">Sub1</a>

        </li>
        <li><a href="#">Sub2</a>

        </li>
        <li><a href="#">Sub3</a>

        </li>
      </ul>
    </li>
  </a>
</ul>

＆＃13;

正如评论中提到的，你的HTML不正确。 ul元素可以包含零个或多个li元素，最终与ol和ul元素混合。

＆＃13;

$(".with-sub").click(function() {
  $(this).find("ul").toggle();
});

＆＃13;

.sub {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#">Test</a>
  </li>
  <li>
    <a href="#">Test2</a>
  </li>
  <li class="with-sub"><a href="#">Test3</a>
    <ul class="sub">
      <li>
        <a href="#">Sub1</a>
      </li>
      <li>
        <a href="#">Sub2</a>
      </li>
      <li>
        <a href="#">Sub3</a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 2

您当前的代码不起作用，因为您尝试将事件绑定到DOM中不存在的元素 - 您需要将click()处理程序放在DOMReady处理程序中。

另请注意，您的HTML无效 - 只有li个元素可以是ul元素的直接后代。试试这个：

<ul>
    <li>
        <a href="#">Test</a>
    </li>
    <li>
        <a href="#">Test2</a>
    </li>
    <li>
        <a href="#" class="with-sub">Test3</a>
        <ul class="sub">
            <li>
                <a href="#">Sub1</a>
            </li>
            <li>
                <a href="#">Sub2</a>
            </li>
            <li>
                <a href="#">Sub3</a>
            </li>
        </ul>
    </li>
</ul>

一旦您修复了HTML，以下jQuery就可以运行：

$(document).ready(function() {
    $(".sub").hide();
    $(".with-sub").click(function() {
        $(this).siblings(".sub").slideDown("slow");
    });
});

Working example

无法选择孩子

2 个答案: