Question

请看这个小提琴http://jsfiddle.net/rabelais/tw6sdod9/

＆＃13;

  $(document).ready(function() {
    $('li ul').slideUp(0);

    $('.no-js li a').on("click", function() {
      $('ul#inner-li ul').slideUp(400);
      if ($(this).siblings('ul').is(":visible"))
        $(this).siblings('ul').slideUp(400);
      else
        $(this).siblings('ul').slideDown(400);
    });
  });
  $('#nav li a').on('click', function() {
    $('li a.current').removeClass('current');
    $(this).addClass('current');
  });





  $(document).ready(function() {
    $('li ul#inner-li-texts').slideDown(0);

    $('.no-js li a#texts').on("click", function() {
      $('ul ul').slideUp(400);
      if ($(this).siblings('ul').is(":visible"))
        $(this).siblings('ul').slideUp(400);
      else
        $(this).siblings('ul').slideDown(400);
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="no-js">
  <li class="caps"><a href="#">Works</a>
    <ul id="inner-li">
      <li><a href="blog.html">blog</a>
      </li>
      <li><a href="portraits.html">Portraits</a>
      </li>
      <li><a href="paintings.html">Paintings</a>
      </li>
      <li><a href="drawings.html">Drawings</a>
      </li>
      <li><a href="photography.html">Photography</a>
      </li>

    </ul>
  </li>
  <li class="caps"><a id="texts" href="#">Texts</a>
    <ul id="inner-li-texts">
      <li><a class="current" href="#essay-one">Essay one</a>
      </li>
      <li><a href="#essay-two">Essay two</a>
      </li>
      <li><a href="#essay-three">Essay three</a>
      </li>
    </ul>
  </li>
  <li class="caps"><a href="../news.htm">News</a>
  </li>
  <li class="caps"><a href="../biography.htm">Biography</a>
  </li>

</ul>

＆＃13;

在这个小提琴上有一个菜单，其中有两个子菜单隐藏在＆＃39; Works＆＃39;和＆＃39;文字＆＃39;链接。

我想要实现的目标是：

加载时我想打开文本子菜单，关闭工作菜单。
当用户点击任一链接时，该子链接的子菜单会打开或关闭。

$(document).ready(function () {
      $('li ul').slideUp(0);

      $('.no-js li a').on("click", function () {
        $('ul#inner-li ul').slideUp(400);
        if($(this).siblings('ul').is(":visible"))
            $(this).siblings('ul').slideUp(400);
        else
            $(this).siblings('ul').slideDown(400);
       });
    });

Answer 1

更新了Jsfiddle

HTML

<ul class="no-js">
  <li class="caps"><a class="alink" href="#">Works</a>
      <ul class="cls" id="inner-li">
                <li><a href="blog.html">blog</a></li>
                <li><a href="portraits.html">Portraits</a></li>
                <li><a href="paintings.html">Paintings</a></li>
                <li><a href="drawings.html">Drawings</a></li>
                <li><a href="photography.html">Photography</a></li>

      </ul></li>
      <li class="caps"><a id="texts" class="alink" href="#">Texts</a>
      <ul class="cls" id="inner-li-texts">
                <li><a class="current" href="#essay-one">Essay one</a></li>
                <li><a href="#essay-two">Essay two</a></li>
                <li><a href="#essay-three">Essay three</a></li>
               </ul>
                </li>
  <li class="caps"><a class="alink" href="../news.htm">News</a></li>
  <li class="caps"><a class="alink" href="../biography.htm">Biography</a></li>

  </ul>

脚本

$(document).ready(function () {
    $('ul.cls').slideUp(0);

    $('a.alink').on("click", function () {
        $(this).next("ul.cls").slideToggle(400);       
    });
});

为我工作

希望这有帮助。

Answer 2

为什么要向#texts添加第二次点击处理程序？这里有一个点击处理程序：

$('.no-js li a').on("click", function () {
    //...
});

但是这里还有另一个：

$('.no-js li a#texts').on("click", function () {
    //...
});

因此，当点击任何其他菜单时，仅调用第一个处理程序，单击#texts将调用两个。它看起来像you only want the first。

Answer 3

为菜单添加两次点击监听器。

我更新了FIDDLE

刚刚删除了重复的代码并添加了：

jQuery('#texts').click();

使用jQuery打开和关闭的多个隐藏菜单？

3 个答案: