Question

对于此标记：

<div id="citate">Citate</div>
<div id="unu" hidden>Autori</div>
<div id="autori" hidden>
    <ul>
        <li>Ion Creanga</li>
        <li>Ion Creanga</li>
        <li>Ion Creanga</li>
        <li>Ion Creanga</li>
    </ul>
</div>
<div id="doi" hidden>Subiecte</div>
<div id="subiecte" hidden>
    <ul>
        <li>Creanga</li>
        <li>Creanga</li>
        <li>Creanga</li>
        <li>Creanga</li>
    </ul>
</div>

我有这段代码JS：

$(document).ready(function () {
    $("div#citate").click(function () {
        $("div#unu ").slideToggle();
    });
});
$(document).ready(function () {
    $("div#citate").click(function () {
        $("div#doi ").slideToggle();
    });
});
$(document).ready(function () {
    $("div#unu").click(function () {
        $("div#autori").slideToggle();
    });
});
$(document).ready(function () {
    $("div#doi").click(function () {
        $("div#subiecte").slideToggle();
    });
});

我希望当我第二次点击＆＃34; Citate＆＃34;它将toogleup来自toogledown的所有其他元素＆＃34; Autori＆＃34;和＆＃34; Subiecte＆＃34;如果有空的话。我试着这样做，我搜索了怎么做但却做不到。我使用了slideToggle()函数。

Answer 1

这可以帮助您。

$("div#citate").click(function(){
   if(  $('div#autori, div#subiecte').is(':visible') ){
      $("div#unu, div#doi,div#autori, div#subiecte").slideUp();
  }
});

Fiddle Demo

无需再次添加$（document）.ready和agian

Answer 2

Its Working使用回调：See DEMO

Answer 3

This is not a optimal solution因为它根本不能扩展，但它确实有效。如果您切换父级（#citate）并且子菜单为visible，请使用slideToggle或slideUp关闭它们。

$(document).ready(function(){

  $("div#citate").click(function(){
      $("div#unu").slideToggle();
      $("div#doi").slideToggle();
      if($("div#autori").is(":visible")) {
        $("div#autori").slideToggle();
      }
      if($("div#subiecte").is(":visible")) {
        $("div#subiecte").slideToggle();
      }
  });

  $("div#unu").click(function(){
      $("div#autori").slideToggle();
  });

  $("div#doi").click(function(){
      $("div#subiecte").slideToggle();
  });
});

如果打开，则切换所有元素

3 个答案: