Question

如何让孩子在PARENT1上的鼠标悬停/鼠标移开时保持打开状态，如果鼠标悬停在其他PARENT2上，则其子女孩打开，PARENT1孩子在此PARENT2上鼠标悬停时隐藏..

var drop = $('#nav li > ul');
var par = $('#nav li')
drop.hide();
$('#nav li').mouseover(function(){
    drop.show();
});
drop.mouseout(function(){
      drop.show()
});

<ul id="nav">
<li>PARENT 1
  <ul>
    <li>CHILD </li>
    <li>CHILD </li>
    <li>CHILD </li>
  </ul>
</li>
<li>PARENT 2
                   <ul>
    <li>CHILD </li>
    <li>CHILD </li>
    <li>CHILD </li>
  </ul>
                </li>
<li>PARENT 3</li>
<li>PARENT 4</li>
</ul>

Answer 1

您可以使用Accordion菜单jquery。我会很快为您提供代码。

// Jquery:

    $(document).ready(function()
    {   
        //slides the element with class "menu_body" when mouse is over the paragraph
        $("#secondpane p.menu_head").mouseover(function()
        {
             $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
             $(this).siblings().css({backgroundImage:"url(left.png)"});
        });
    });


// CSS :
    <style type="text/css">
    body {
        margin: 10px auto;
        font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
    }
    .menu_list {    
        width: 150px;
    }
    .menu_head {
        padding: 5px 10px;
        cursor: pointer;
        position: relative;
        margin:1px;
        font-weight:bold;
        background: #eef4d3 url(left.png) center right no-repeat;
    }
    .menu_body {
        display:none;
    }
    .menu_body a{
      display:block;
      color:#006699;
      background-color:#EFEFEF;
      padding-left:10px;
      font-weight:bold;
      text-decoration:none;
    }
    .menu_body a:hover{
      color: #000000;
      text-decoration:underline;
      }
    </style>

// HTML CODE:
    <div style="float:left; margin-left:20px;"> <!--This is the second division of right-->
      <p><strong>Works with mouse over </strong></p>
      <div class="menu_list" id="secondpane"> <!--Code for menu starts here-->
            <p class="menu_head">Header-1</p>
            <div class="menu_body">
            <a href="#">Link-1</a>
             <a href="#">Link-2</a>
             <a href="#">Link-3</a> 
            </div>
            <p class="menu_head">Header-2</p>
            <div class="menu_body">
                <a href="#">Link-1</a>
             <a href="#">Link-2</a>
             <a href="#">Link-3</a> 
            </div>
            <p class="menu_head">Header-3</p>
            <div class="menu_body">
              <a href="#">Link-1</a>
             <a href="#">Link-2</a>
             <a href="#">Link-3</a>         
           </div>
      </div>      <!--Code for menu ends here-->
    </div>

您可以尝试使用此代码，我相信它对您有所帮助。你也可以在侧边栏中找到my blog的那个..goto Source files框，然后下载源代码zip文件。

感谢。

Answer 2

首先为所有父li和子ul分配一个公共类，如此......

<ul id="nav">
            <li class="parent">PARENT 1
              <ul class="child">
                <li>CHILD </li>
                <li>CHILD </li>
                <li>CHILD </li>
              </ul>
            </li>
            <li class="parent">PARENT 2
             <ul class="child">
                <li>CHILD </li>
                <li>CHILD </li>
                <li>CHILD </li>
              </ul>
            </li>
            <li class="parent">PARENT 3</li>
            <li class="parent">PARENT 4</li>
 </ul>

然后尝试这个..

 $('.parent').mouseover(function(){
            $('.child').hide()//will first hide all the child
           $(this).find('.child').show();//show the current child
        });

Answer 3

使用jQuery Accordion，http://docs.jquery.com/UI/Accordion

鼠标悬停时的Jquery下拉列表

3 个答案: