Question

首先，我道歉，互联网上有很多例子，我已经尝试了所有这些例子，但我没有太多运气。

我有以下与此HTML一起使用的jQuery代码：

    $(document).ready(function() {
      $(".has-sub").click(function() {
        $(this).find(".hover").slideToggle(400);
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li class="has-sub"><a href="#">2016 Season</a>
      <ul class="hover">
        <li><a href="2016F1Calendar.php">F1 Calendar</a>
        </li>
        <li><a href="2016F1Teams.php">F1 Teams &amp; Drivers</a>
        </li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">2015 Season</a>
      <ul class="hover">
        <li><a href="2015F1Rounds1-6.php">Race Reports: Rounds 1-6</a>
        </li>
        <li><a href="2015F1Rounds7-12.php">Race Reports: Rounds 7-12</a>
        </li>
        <li><a href="2015F1Calendar.php">F1 Calendar</a>
        </li>
        <li><a href="2015F1Gallery.php">F1 Gallery</a>
        </li>
        <li><a href="2015F1Standings.php">F1 Standings</a>
        </li>
        <li><a href="2015F1Teams.php">F1 Teams &amp; Drivers</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

当我点击“2016赛季”然后点击“2015赛季”时，我点击的第一个仍然保持打开状态。是否有一种方法，当点击标题时，所有其他人关闭（如果有任何打开）？

感谢。

Answer 1

在点击的.hover中向上展开不的所有.has-sub：

$('.has-sub').click(function () {
  $('.has-sub').not(this).find('.hover').slideUp();  //add this line
  $(this).find('.hover').slideToggle(400);
});

$(document).ready(function() {
  $('.has-sub').click(function () {
    $('.has-sub').not(this).find('.hover').slideUp();
    $(this).find('.hover').slideToggle(400);
  });
});

.has-sub .hover {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li class="has-sub"><a href="#">2016 Season</a>
      <ul class="hover">
        <li><a href="2016F1Calendar.php">F1 Calendar</a>
        </li>
        <li><a href="2016F1Teams.php">F1 Teams &amp; Drivers</a>
        </li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">2015 Season</a>
      <ul class="hover">
        <li><a href="2015F1Rounds1-6.php">Race Reports: Rounds 1-6</a>
        </li>
        <li><a href="2015F1Rounds7-12.php">Race Reports: Rounds 7-12</a>
        </li>
        <li><a href="2015F1Calendar.php">F1 Calendar</a>
        </li>
        <li><a href="2015F1Gallery.php">F1 Gallery</a>
        </li>
        <li><a href="2015F1Standings.php">F1 Standings</a>
        </li>
        <li><a href="2015F1Teams.php">F1 Teams &amp; Drivers</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 2

试试这个：

    $(document).ready(function() {
      $(".has-sub").click(function() {
        $(this).find(".hover").slideToggle(400);
        $(this).parent().children(".has-sub").not(this).find(".hover").slideUp(400);
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li class="has-sub"><a href="#">2016 Season</a>
      <ul class="hover" style="display:none;">
        <li><a href="2016F1Calendar.php">F1 Calendar</a>
        </li>
        <li><a href="2016F1Teams.php">F1 Teams &amp; Drivers</a>
        </li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">2015 Season</a>
      <ul class="hover" style="display:none;">
        <li><a href="2015F1Rounds1-6.php">Race Reports: Rounds 1-6</a>
        </li>
        <li><a href="2015F1Rounds7-12.php">Race Reports: Rounds 7-12</a>
        </li>
        <li><a href="2015F1Calendar.php">F1 Calendar</a>
        </li>
        <li><a href="2015F1Gallery.php">F1 Gallery</a>
        </li>
        <li><a href="2015F1Standings.php">F1 Standings</a>
        </li>
        <li><a href="2015F1Teams.php">F1 Teams &amp; Drivers</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 3

$(document).ready(function() {
  $(".has-sub").click(function () {

    // Find any that are currently visible and slide them up (unless it's the current one)
    $(".has-sub").not(this).find(".hover:visible").slideToggle(400);

    $(this).find(".hover").slideToggle(400);
  });
});

小提琴：http://jsfiddle.net/pfgjvg1z/

Answer 4

试试这个。如果ul打开它将关闭它。但如果ul关闭，它将隐藏所有打开的uls然后打开它。

$(function(){
    $(".has-sub").click(function () {
        var ul = $(this).find(".hover");
        if(ul.is(":visible"){
            ul.slideUp(400);
        }else{
            $(".has-sub .hover").slideUp(400);
            ul.slideDown(400);
        }
    });
});

jQuery菜单 - 单击以打开但关闭其他

4 个答案: