点击二级导航固定在页面上

Question

点击二级导航固定在页面上

3

我有一个两级菜单导航。如果我点击第二级菜单，它不应该隐藏，而是应该保持在那里。鼠标悬停时，第二级菜单可以正常显示，现在我想要的是，如果我点击子菜单2并将光标移出，子菜单2应该被选中并保持在那里。

$(document).ready(function () {
    var $nav = $('#top_navigation > ul > li');
    $nav.hover(
        function() {
         $('ul', this).stop(true, true).slideDown('fast');
            $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
     },
     function() {
            $('ul', this).slideUp('fast');
            $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
     }
    );
});

#top_navigation {
    width: 1248px;
    margin: 0 auto;
    position: relative;
    text-transform: uppercase;
    font-family: "Rounded Font", sans-serif;
    font-size: 13px;
}
#top_navigation ul ul {
    display: none;
}
#top_navigation ul {
    padding-left: 0;
}
#top_navigation ul li {
    margin: 0;
    padding: 0;
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    list-style: none;
}
#top_navigation ul li a {
   display: block;
    text-align: center;
    text-decoration: none;
    color: #000;
    background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
    background-color: #ccc;
    color: #FFF;
}
#top_navigation ul li a:hover {
    background-color: #ccc;
    color: #FFF;
}
#top_navigation li li {
    height: 30px;
    line-height: 30px;
    border-top: #ccc 1px solid;
}

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body bgcolor="black">   
        <div id="top_navigation">
      <ul>
       <li><a href="#">item1</a></li>
       <li><a href="#">item2</a>
        <ul class="submenu">
         <li><a href="#">sub1</a></li>
         <li><a href="#">sub2</a></li>
         <li class="selected_menu_item"><a href="#">sub3</a></li>
        </ul>
       </li>
      </ul>
     </div>
    </body>
</html>

- anu

点击时，向子元素添加一个类，当鼠标移出时，如果存在该类，则不执行滑动上去的操作。 - Cerlin

2个回答

0

 $(document).ready(function () {
     var $nav = $('#top_navigation > ul > li');
        var $nav1 = $('#top_navigation > ul > li >ul >li');
     $nav.hover(
      function() {
       $('ul', this).stop(true, true).slideDown('fast');
    
                $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
      },
      function() {
    
       $('ul', this).slideUp('fast');
               $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
      }
     );
   $nav1.click(function(){
     $(this).addClass("selected_menu_item");
     }
   );
    });

#top_navigation {
     width: 1248px;
     margin: 0 auto;
     position: relative;
     text-transform: uppercase;
     font-family: "Rounded Font", sans-serif;
     font-size: 13px;
    }
    #top_navigation ul ul {
     display: none;
    }
    #top_navigation ul {
     padding-left: 0;
    }
    #top_navigation ul li {
     margin: 0;
     padding: 0;
     float: left;
     width: 100px;
     height: 30px;
     line-height: 30px;
     font-size: 13px;
     list-style: none;
    }
    #top_navigation ul li a {
     display: block;
     text-align: center;
     text-decoration: none;
     color: #000;
     background-color: #FFF;
    }
    #top_navigation ul li.selected_menu_item a {
     background-color: #ccc;
     color: #FFF;
    }
    #top_navigation ul li a:hover {
     background-color: #ccc;
     color: #FFF;
    }
    #top_navigation li li {
     height: 30px;
     line-height: 30px;
     border-top: #ccc 1px solid;
    }

<html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            
        </head>
      <body bgcolor="black">   
        <div id="top_navigation">
      <ul>
       <li><a href="#">item1</a></li>
       <li><a href="#">item2</a>
        <ul class="submenu">
         <li><a href="#">sub1</a></li>
         <li><a href="#">sub2</a></li>
         <li class="selected_menu_item"><a href="#">sub3</a></li>
        </ul>
       </li>
       
      </ul>
     </div>
    </body>
    
    
    </html>

我已经在你的代码中添加了点击事件。这是它的运行片段。

- Bijal

当我点击第二层时，它不应该隐藏。只有当我点击第一层时，它才应该隐藏。问题是当我移动鼠标时，第二层消失了。 - anu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vincent Panugaling · Accepted Answer

尝试这个：

    $(document).ready(function () {
    var $nav = $('#top_navigation > ul > li');
    $nav.hover(
        function() {
            $('ul', this).stop(true, true).slideDown('fast');

            $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
        },
        function() {
           if( ! $('ul', this).children().hasClass('show')) {
               $('ul', this).slideUp('fast');
           } else {
              $('#top_navigation ul').click(function(){
                $('ul.submenu').slideUp();
              })
           }
           $('a',this).first().css({"background-color":"#ccc", "color":"#000"});
        }
    );

    $('ul.submenu li').click(function(){
      $('ul.submenu li').removeClass('selected_menu_item')
        $(this).addClass('selected_menu_item show')
    });


});

工作示例：https://jsfiddle.net/co7u8L23/2/