文章/答案/技术大牛

发布

社区首页 >问答首页 >css显示属性干扰我的jquery切换

问css显示属性干扰我的jquery切换
EN

Stack Overflow用户

提问于 2013-03-21 07:43:08

回答 2查看 708关注 0票数 1

我想要创建一个简单的移动菜单，将切换时，点击和关闭。我还希望它只显示父母，而不是孩子猫的，直到父母被单击。

我四处寻找，找到了这两个问题的好答案。然而，当组合在一起时，我得不到想要的结果。

具体地说，我使用的jquery切换依赖于设置为"display:none“的nav ul作为它们的起始状态，但这以某种方式干扰了我的其他jquery函数，以隐藏父元素属于顶级ul类的元素。

除了在初始加载菜单时没有任何子项显示的部分之外，一切都按预期工作。然而，一旦我删除了最初完全隐藏了nav ul的css行，那么子元素就会被隐藏(当然，当我想隐藏它的时候，我的nav会在加载时展开。

我正在尝试解决这个问题的页面: http://saks-jewelers.com/mobile-nav/mobile_nav.html#

下面是我的html代码和jquery：

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Responsive Header Nav</title>
    <meta name="description" content="Responsive Header Nav">
    <meta name="author" content="Treehouse">
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
    <link rel="stylesheet" href="styles.css">
    <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#menu-icon").click(function(){
        $("nav ul").toggle(200);
      });

        $('#nav>li>ul').each(function(){
            if($(this).parent().hasClass("level0")) 
            { 
                $(this).hide();
            } else {
                $(this).show(); 
            }
        });
        $('#nav>li').click(function(){
            // check that the menu is not currently animated
            if ($('#nav ul:animated').size() == 0) {
                // create a reference to the active element (this)
                // so we don't have to keep creating a jQuery object
                $heading = $(this);
                // create a reference to visible sibling elements
                // so we don't have to keep creating a jQuery object
                $expandedSiblings = $heading.siblings().find('ul:visible');
                if ($expandedSiblings.size() > 0) {
                    $expandedSiblings.slideUp(200, function(){
                        $heading.find('ul').slideDown(200);
                    });
                }
                else {
                    $heading.find('ul').slideDown(200);
                }
            }
        });
    });
    </script>
    <body>
    <header>
    <a href="#" id="logo"></a>
    <nav>
        <a href="#" id="menu-icon"></a>
    <ul id="nav">
            <li class="level0 nav-1 first level-top parent">
            <a href="#" class="level-top"><span>Rings</span></a>
            <ul class="level0">
                <li class="level1 nav-1-1 first"><a href="#" class=""><span>CZ Fashion</span></a></li>
                <li class="level1 nav-1-2"><a href="#" class=""><span>Gemstone Fashion</span></a></li>
                <li class="level1 nav-1-3"><a href="#" class=""><span>Silver &amp; Gold Fashion</span></a></li>
                <li class="level1 nav-1-4"><a href="#" class=""><span>Pearl</span></a></li>
                <li class="level1 nav-1-5"><a href="#" class=""><span>Moissanite™</span></a></li>
                <li class="level1 nav-1-6"><a href="#" class=""><span>Religious &amp; Symbolic</span></a></li>
                <li class="level1 nav-1-7"><a href="#" class=""><span>Youth</span></a></li>
                <li class="level1 nav-1-8"><a href="#" class=""><span>Promise Rings</span></a></li>
                <li class="level1 nav-1-9 last"><a href="#" class=""><span>Wedding</span></a></li>
            </ul>
        </li>
        <li class="level0 nav-2 level-top parent"><a href="#" class="level-top"><span>Earrings</span></a>
            <ul class="level0">
                <li class="level1 nav-2-1 first"><a href="#" class=""><span>CZ Fashion</span></a></li>
                <li class="level1 nav-2-2"><a href="#" class=""><span>Gemstone Fashion</span></a></li>
                <li class="level1 nav-2-3"><a href="#" class=""><span>Silver &amp; Gold Fashion</span></a></li>
                <li class="level1 nav-2-4"><a href="#" class=""><span>Pearl</span></a></li>
                <li class="level1 nav-2-5"><a href="#" class=""><span>Moissanite™</span></a></li>
                <li class="level1 nav-2-6"><a href="#" class=""><span>Religious &amp; Symbolic</span></a></li>
                <li class="level1 nav-2-7 last"><a href="#" class=""><span>Youth</span></a></li>
            </ul>
        </li>
    </ul>
    </nav>
    </header>
    <section>
    <img src="featured.png" alt="Respond" />
    <h1>Respond to Your Surroundings</h1>
    <p>...Filler Text</p>
    <p>...Filler Text</p>
    <p>Filler Text</p>
    </section>
    </body>
    </html>

下面是我的css：

    /*RESET*/
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

    /*MAIN*/
    body { 
        font-size: 1.05em;
        line-height: 1.25em;
        font-family: Helvetica Neue, Helvetica, Arial;
        background: #f9f9f9;
        color: #555;
    }
    a {
        color: #4C9CF1;
        text-decoration: none;
        font-weight: bold;
    }
    a:hover { color: #444;  }
    img { width: 100%;  }
    header {
        background: #fff;
        width: 100%;
        height: 76px;
        position: fixed;
        top: 0;
        left: 0;
        border-bottom: 4px solid #4C9CF1;
        z-index: 100;
            }
    #logo{
        margin: 20px;
        float: left;
        width: 200px;
        height: 40px;
        background: url(nav-logo.png) no-repeat center;
        display: block;
            }
    nav {   float: right;   padding: 20px;  }
    #menu-icon {
        display: hidden;
        width: 40px;
        height: 40px;
        background: #4C8FEC url(nav-menu-icon.png) center;
    }
    a:hover#menu-icon {background-color: #444; border-radius: 4px 4px 0 0;   }
    ul { list-style: none; }
    li {
        display: inline-block;
        float: left;
            padding: 10px
    }
    .current {color: #2262AD;}
    section {
        margin: 80px auto 40px;
        max-width: 980px;
        position: relative;
        padding: 20px
    }
    h1 {
        font-size: 2em;
        color: #2262AD;
        line-height: 1.15em;
        margin: 20px 0 ;
    }
    p {line-height: 1.45em; margin-bottom: 20px;}

    /*MEDIA QUERY*/
    @media only screen and (max-width : 640px) {

        header {position: absolute; }
        #menu-icon { display:inline-block; }
        nav ul, nav:active ul { 
            display: none;
            position: absolute;
            padding: 20px;
            background: #fff;
            right: 20px;
            top: 60px;
            width: 50%;
        }
        nav li {
            text-align: left;
            width: 100%;
            padding: 10px 0;
            margin: 0;
        }

如果这只是一种愚蠢的方式来做我想做的事情，我愿意选择更简单的替代方案。

toggle

jquery

css

mobile

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-03-21 08:50:09

你也许可以改进一下：(如果我能理解你的意图，这应该是可行的)

var subs = $('#nav>li.level0>ul');
$("#menu-icon").click(function () {
      $("nav> ul").toggle(200);
      if ($("nav ul").is(':hidden')) {
          subs.hide();
      }
  });
  subs.hide();
  $('#nav>li').click(function () {
       if (!$('#nav ul:animated').length) {
          $heading = $(this);
          $expandedSiblings = $heading.siblings().find('ul:visible');
          if ($expandedSiblings.length) {
              $expandedSiblings.slideUp(200, function () {
                  $heading.find('ul').slideDown(200);
              });
          } else {
              $heading.find('ul').slideDown(200);
          }
      }
  });

这似乎也是可行的，而且更简单：

 var subs = $('#nav>li.level0>ul');
 $("#menu-icon").click(function () {
     $("nav> ul").toggle(200);
     if ($("nav ul").is(':hidden')) {
         subs.hide();
     }
 });
 subs.hide();
 $('#nav>li').click(function () {
     if (!$('#nav ul:animated').length) {
         $(this).siblings().find('ul:visible').slideUp(200, function () {
             $(this).find('ul').slideDown(200);
         });
        $(this).find('ul').slideDown(200);
     }
 });

票数 1

Stack Overflow用户

发布于 2013-03-21 08:09:38

我觉得你把事情搞得太复杂了。我会这样做的：

<div class="rings" style="display:none">
    <ul>
      <li> ring 1 .... </li>
      <li> ring 2 .... </li>
      ....
    </ul>
</div>

<div class="earrings" style="display:none">
    <ul>
      <li> ring 1 .... </li>
      <li> ring 2 .... </li>
      ....
    </ul>
</div>

接下来是jQuery：

$('.menuAnchor').on('click', function(){
   var $this = $(this); //get the clicked element again

   //Get the text in the a tag and pass it a class selector
   //Therefor <a class="menuAnchor">earrings</a> on click with toggle the earrings div
   $('.'+$this.html()).slideToggle(500); 
});

就css而言，里面有一些无用的东西，但我认为你可以修复它，不会有什么大问题。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15536885

复制

相似问题

问css显示属性干扰我的jquery切换
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css显示属性干扰我的jquery切换EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css显示属性干扰我的jquery切换
EN