Question

以下是当前代码：子菜单自动打开，希望在单击主菜单之前保持关闭状态 -

<!DOCTYPE html>
<html>
<head>
<script class="jsbin"src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">                      </script>
<meta charset=utf-8 />
<title>DEMO</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>



</style>
</head>
<body>

这是代码：jquery踢我的屁股：）

 <nav class="menu-desktop">
  <ul class="main-menu">
        <li data-ref="Top1"><a href="/index.php" >Main Link1</a></li>
        </ul>
  <ul class="Top1" >
        <li><a href="#" >sub link</a></li>
        <li><a href="#1">sub name2</a></li>
        <li><a href="#2">sub name3</a></li>
        <li><a href="$">sub name4</a></li>   
  </ul>

<ul class="main-menu">
<li data-ref="Top2"><a href="#" >Main Link2</a></li>
        </ul>
  <ul class="Top2" >
        <li><a href="#" >2sub link</a></li>
        <li><a href="#1">sub name22</a></li>
        <li><a href="#2">sub name23</a></li>
        <li><a href="$">sub name24</a></li>   
  </ul>

<ul class="main-menu">
<li data-ref="Top3"><a href="#" >Main Link3</a></li>
        </ul>
  <ul class="Top3" >
        <li><a href="#" >3sub link</a></li>
        <li><a href="/_3Testingonly.php">sub name32</a></li>
        <li><a href="#2">sub name33</a></li>
        <li><a href="$">sub name34</a></li>   
  </ul>  
</nav>  

</body>
</html>

jquery踢我的屁股：）

var submenu;

$('.main-menu li').click(function(){
var elems = $('.menu-desktop ul:not(.main-menu)').length;
var $refClass = $('.' + $(this).attr('data-ref'));
var visible = $refClass.is(':visible');

$('.menu-desktop ul:not(.main-menu)').slideUp(100, function() {

    if (elems == 1) {
        if (!visible) $refClass.slideDown('fast');
    }

    elems--;
});

if (visible) $('#breadcrumbs-pc').animate({'margin-top':'0rem'}, 100);
else $('#breadcrumbs-pc').animate({'margin-top':'5rem'}, 100);
});

Answer 1

最初使用CSS隐藏它：

.main-menu + ul { display:none; }

Answer 2

我看到了你的最后工作。做得好。有点晚了，我知道你不需要它，但正如我所承诺的那样，我在评论中的含义。 Here's the Fiddle

<强> HTML

<ul class="menu">
    <li>Home</li>
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
    </ul>
    <li>Services</li>
    <ul>
        <li>Element 4</li>
        <li>Element 5</li>
        <li>Element 6</li>
    </ul>
</ul>

<强>的Javascript

$(document).ready( function() {
    $('li').click(function(){
        $('ul.menu ul').slideUp('fast'); // hides all the submenu that are open
            var submenu = $(this).next('ul');
        if ( $(this).next('ul').is(':visible') ) {
            submenu.slideUp('fast'); // if is already open, it will hide it. if you don't care about one being always open, delete this if statement and keep the last line slideToggle.
        } else {
            submenu.slideToggle('fast'); // toggles within open and close.
        }
    });
});

<强> CSS

ul.menu { margin: 0; padding: 0; width: 200px; font-family: arial;}
ul.menu ul { display: none; }
ul.menu li { list-style: none; border: 1px solid #CCCCCC; padding: 10px; }
ul.menu ul { padding: 0; background: #EEEEEE  }

jquery如何保持子菜单关闭，直到单击主菜单？

2 个答案: