3

在垂直手风琴菜单中，我想用其他菜单或分区替换菜单内容。这是我的代码

<nav>
  <ul id="nav">
    <li><a href="#">Menu 1</a>
           <div> New Menu 1</div> 
      <ul>
        After clicking on each header we will show/hide the internal navigation links. This situation can get tricky when trying to implement sub-navigation and sub-sub-navigation if you want to show/hide those as well. A better solution is to nest a third  element which is also displayed immediately with all the other links, but rendered using additional padding.


      </ul>
    </li>
    <li><a href="#">Menu 2</a>
         <div> New Menu 2</div>
      <ul>
        Create html drop down menus for web page navigation in a few clicks! Define text, font, color, URL and more for the multilevel dropdown menus. You don't need to write any code by yourself. Horizontal drop down menus builder will generate it for you. You can preview menus in web browser without quitting the program. Css drop down menus render perfectly in Firefox, Safari and Chrome. Html drop down menus also works on non-CSS3 compitable browsers
      </ul>
    </li>
    <li><a href="#">Menu 3</a>
         <div> New Menu 3</div>
      <ul>
        PURE CSS Menu Maker is a free and powerful graphical user interface for creating 100% pure CSS web menus. CSS menus do not require JavaScript or plug-ins in order to run. PURE CSS Menu Maker can create horizontal as well as vertical menus. Menus generated with PURE CSS Menu Maker may be modified freely, either with PURE CSS Menu Maker or by hand.
      </ul>
    </li>

  </ul>
</nav>

脚本

 $(document).ready(function()
{
  $('#nav > li > ul:eq(0)').show();
  $("#nav > li > a").on("click", function(e)
  {
    if($(this).parent().has("ul")) 
    {

        e.preventDefault();
    }

    if(!$(this).hasClass("open")) 
    {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);

      $("#nav li a").removeClass("open");


      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);

      $(this).addClass("open");

    }

    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

单击时，我想用 div 更改菜单并在下一次单击菜单时隐藏该 div。怎么能做到？谢谢。

这是一个小提琴：http: //jsfiddle.net/sW96K/

4

4 回答 4

0

请参阅以下链接。您可以找到不同类型的手风琴

http://jqueryui.com/accordion/
于 2013-07-09T10:59:41.210 回答
0

你想要这样吗？小脚本可以处理这个问题。演示http://jsfiddle.net/yeyene/HmwN8/3/

$(document).ready(function(){
    $('a.toggle').on('click', function(){
        $('.content').slideUp('2000', "easeOutBounce");

        if($('div#'+$(this).attr('rel')).css('display')=='block')
            $('div#'+$(this).attr('rel')).slideUp('2000', "easeOutBounce");
        else
            $('div#'+$(this).attr('rel')).slideDown('2000', "easeOutBounce");
    });
});
于 2013-07-09T09:49:21.980 回答
0

您可以尝试使用简单的slideToggle()

           $(document).ready(function()
              {
                  $('#nav > li > ul:eq(0)').show();
                  $("#nav li a").on("click", function(e)
                     {
                         $(this).siblings("ul").slideToggle(350);
                     });
              });

检查这个小提琴：http: //jsfiddle.net/Kritika/ZXE6K/

此代码将在单击时打开一个菜单，但不会关闭其他打开的菜单。这是简单的隐藏/显示
div

于 2013-07-09T09:46:13.427 回答
0

我想我现在明白你的意思了。应该是这样的：

编辑：每次你替换内容时，它都会简单地用一个函数重新实例化..

function doit(element) {
    $(element).on("click", function (e) {
        e.preventDefault();
        var newElement = $(element).next();
        $(element).parent().siblings().each(function(){
            if(!$(this).children('a').is(':visible')){
                $(this).children('div').clone().hide().insertAfter($(this).children('a'));
                $(this).children('div:first-child').replaceWith($(this).children('a').show());
                $(this).children('ul').hide(350);
                doit($(this).children('a'));
            }
        });
        $(element).clone().hide().insertAfter($(element).next());
        $(element).replaceWith($(element).next().show());
        $(newElement).next().next().slideToggle(350); // slide toggle in 350ms
        doit(newElement);
    });
}
$(document).ready(function () {
    $('#nav > li > ul').hide(); // Hide all menus
    $('#nav > li > div').hide(); // Hide all divs under menus
    $("#nav > li > a").each(function() {
        doit(this);
    });
    $('#nav > li:first-child > a').click(); // Open first element
});

http://jsfiddle.net/BerkerYuceer/evxPq/

于 2013-07-09T10:04:55.293 回答