0

我无法选择最接近的匹配项。我已经尝试过.closest,.next和.nextall; 我也尝试过使用（this），但我认为我使用它们不正确。

这是我想要实现的：.show单击时，最接近的.list-content将切换并且最接近的toggleClass icon-rotate-180 也是。

<ul class="list-unstyled">
    <li class="list-menu">
        <a href="javascript:void(0);" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
    </li>
    <li class="list-content">Hidden Content until Clicked</li>

    <li class="list-menu">
        <a href="javascript:void(0);" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
    </li>
    <li class="list-content">Hidden Content until Clicked</li>
</ul>

<script>
    $(document).ready(function() {
        $(".list-content").hide();
            $(".show").click(function() {
                $(".icon-chevron-down").toggleClass("icon-rotate-180");
                $(".list-content").toggle();
            });
        });
</script>
4

2 回答 2

1

首先，您的 HTML 无效，因为您不能将div元素作为ul. 考虑到这一点，试试这个：

<ul class="list-unstyled">
    <li class="list-menu">
        <a href="#" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
        <div class="list-content">Hidden Content until Clicked</div>
    </li>

    <li class="list-menu">
        <a href="#" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
        <div class="list-content">Hidden Content until Clicked</div>
    </li>
</ul>

$(".show").click(function(e) {
    e.preventDefault();
    $(".icon-chevron-down", this).toggleClass("icon-rotate-180");
    $(".list-content", $(this).closest('li')).toggle();
});
于 2013-08-12T10:27:49.897 回答
0

  1. ul/li这里是错误的情况。第二个li是相对于第一个li。请使用dl,dd而dt不是 - 这不是完美匹配，但比ul/更好li！

  2. a用于链接，但您不调用 url。请使用它dd本身或 aspan所以你不需要javascript:void(0);and no e.preventDefault();。

    操作日期 隐藏内容，直到点击

      <dd class="list-menu show">
      Date of Operations
      <i class="icon-chevron-down pull-right"></i>
  </dd>
  <dt class="list-content">Hidden Content until Clicked</dt>

    $(".show").click(function(e) { $(this).closest(".icon-chevron-down").toggleClass("icon-rotate-180"); $(this).next( "dt.list-content").toggle(); });

（我从Selecting Closest Match using jQuery中复制了 RoyMcCrossan 的部分答案）

抱歉，结构损坏，看起来像 Stackoverflow 中的错误。

于 2013-08-12T10:54:29.073 回答